CSS Border ve Border Radius - Kenarlıklar

css border radius

CSS' de oluşturduğunuz bir bölgeye kenarlık verebilirsiniz. Bunu yapmak için de border özelliğinden yararlanmalısınız. Border özelliğinden kısaca bahsedecek olursak, solid-dashed-dotted şekillerinden birine sahip ve kalınlığı olan, ayrıca kenarları kıvrılabilen-yuvarlaklaştırılabilen bir eleman.




Alttaki örnekte, yanyana verilmiş 3 tipte bulunan kenarlık örneğini inceleyebilirsiniz.



See the Pen CSS Border_1 by anil bbyk (@anilbbyk) on CodePen

Kenarlık yapımı bu kadarla bitmiyor elbette ama ben yüzeysel olarak geçmek istiyorum.

Kenarlık yaparken örneğin üst kenarı yapıp alt kenarı yapmamak istemeyebilirsiniz. Bu durumda da CSS içinde bulunan border-left,border-right, border-top ve border-bottom kodlarından, yani her kenar için kodu özel olarak eklemek, yararlanabilirsiniz.


Kenarlık yaparken eğer kenarları kıvırmak isterseniz, bu da çok kolay. Ben genelde kod ile yazmak yerine verdiğimiz pixele göre kod oluşturan bir siteden oluşturup, kullanıyorum. Gerçekten kullanımı kolay.

Siteye buradan ulaşabilirsiniz.

Eğer kod ile border-radius yazmak isterseniz de şu örneği vereyim :


See the Pen Border Radius by anil bbyk (@anilbbyk) on CodePen


Buradan anlayacağınız gibi, border-radius ile kenarları yuvarlaklaştırdık. -webkit- ve -moz- ibarelerini görebilirsiniz, bunlar farklı tarayıcılarda kodun işlevselliği açısından gereklidir.
TAG