Bu yazımda CSS’te kenarlık belirleme, kenarlıkların biçimini ve rengini ayarlama gibi konulara değineceğim.

border-width: 5px; /* Kenarlık genişliği */
border-style: solid; /* Kenarlık stili */
border-color: #ccc;/* Kenarlık rengi */

Bu şekildeki kullanımda verdiğiniz değerler bütün kenarlara etki edecektir. Her kenar için ayrı ayrı düzenleme yapmak istiyorsak şu kodları kullanmalıyız:

border-top-style: dashed; /* Üst kenar için kenarlık stili */
border-top-width: 3px; /* Üst kenar için kenarlık yüksekliği */
border-top-color: #fff; /* Üst kenar için kenarlık rengi */

border-left-style: dotted; /* Sol kenar için kenarlık stili */
border-left-width: 5px; /* Sol kenar için kenarlık yüksekliği */
border-left-color: #ccc; /* Sol kenar için kenarlık rengi */

border-bottom-style: double; /* Alt kenar için kenarlık stili */
border-bottom-width: 6px; /* Alt kenar için kenarlık yüksekliği */
border-bottom-color: #ff4400; /* Alt kenar için kenarlık rengi */

border-right-style: groove; /* Sağ kenar için kenarlık stili */
border-right-width: 4px; /* Sağ kenar için kenarlık yüksekliği */
border-right-color: #eee; /* Sağ kenar için kenarlık rengi */

Bu kullanım pek tercih edilmez. Tercih edilen kullanım şu şekildedir:

border: 1px solid #ccc;

Örnek kullanım:

.kenarlik {
border: 1px solid #ccc;
}

Burada birinci değer (1px) kenarlığın genişliğini, ikinci değer (solid) kenarlık stilini, üçüncü değer (#ccc) ise kenarlığın rengini belirler. Bu kullanımda verdiğiniz değerler bütün kenarlara etki eder. Kenarları ayrı ayrı biçimlendirmek isterseniz de şöyle bir kullanım mevcut:

border-left: 3px dashed #000; /* Sol kenarlık için */
border-right: 2px dotted #fff; /* Sağ kenarlık için */
border-bottom: 5px double #ccc; /* Alt kenarlık için */
border-top: 4px inset #eee; /* Üst kenarlık için */

Kenarlık stilleri

Kenarlık stillerinin kullanımını yukarda gördük. Şimdi hangi stil nasıl görünür ona bakalım.

CSS’te border özellikleri bu kadar fakat her tarayıcı için geçerli olmayan bazı güzel kodlar da mevcut. Bir de onları inceleyelim.

-moz-border-radius

Bu şahane kod Firefox tarayıcılar için geçerli ve bilinçli kullanıldığında çok dehşet tasarımlara imza atabilir. Peki nasıl kullanılır bu kod?

Öncelikle kenarlığımızın genişliğini, rengini, stilini yukarıda gösterildiği gibi belirliyoruz. Daha sonra -moz-border-radius kodunu kullanarak istediğimiz köşeyi ya da köşeleri istediğimiz boyutlarda ovalleştirebiliyoruz. Kullanımı şu şekilde:

border: 1px solid #000;
-moz-border-radius: 4px; /* Bütün köşeleri ovalleştirir. */
-moz-border-radius-topleft: 3px; /* Sol üst köşeyi ovalleştirir. */
-moz-border-radius-topright: 4px; /* Sağ üst köşeyi ovalleştirir. */
-moz-border-radius-bottomright: 2px; /* Sağ alt köşeyi ovalleştirir. */
-moz-border-radius-bottomleft: 5px; /* Sol alt köşeyi ovalleştirir. */

Bir de kısa kullanım şekli var.

-moz-border-radius: 10px 20px 30px 40px

Birinci değer (10px) sol üst, ikinci değer (20px) sağ üst, üçüncü değer (30px) sağ alt, dördüncü değer (40px) ise sol alt köşeyi yuvarlayacaktır. Firefox kullananlar için örneğini vereyim: