CSS Kenarlıklar

Bir HTML elementinin kenarlarına çizgi çekerken kullanacağımız kodlar şunlardır:
[code type=css]
border-style
border-width
border-color

border-style: Kenarlık Stili
Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.

Kullanabileceğiniz stiller:

none – Kenarlık yok
dotted – Noktalı
dashed – Kesik çizgili
solid – Çizgi
double – Çift çizgi
groove
ridge
inset
outset

Örnek bir kullanım:
[code type=css]
.kutum { border-style: dotted; }
[/code]

border-width: Kenarlık Boyutu
Kenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Örnek bir kullanım:
[code type=css]
.kutum { border-style: solid; border-width: 1px; }
[/code]
border-color: Kenarlık Rengi
Kenarlık rengini bu komutla değiştirebiliriz. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.

Renk kullanımı hakkında bilgi için buraya tıklayın.

Örnek bir kullanım:
[code type=css]
.kutum {
border-style: solid;
border-width: 1px;
border-color: #0000CC;
}
[/code]

Kenarları Ayrı Ayrı Şekillendirmek
İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendirebiliriz.

border-left-style – Sol kenarın şekli.
border-right-style – Sağ kenarın şekli.
border-top-style – Üst kenarın şekli.
border-bottom-style – Alt kenarın şekli.

Ayrıca border-style dört kenarın değerini de alacak şekilde yazılabilir. Örneğin:
[code type=css]
border-style: dotted solid double dashed;
[/code]
Üst kenar – dotted,
Sağ kenar – solid,
Alt kenar – double,
Sol kenar – dashed.

Farkettiyseniz border-style yazdıktan sonra sırasıyla saat yönünde kenarları ayrı ayrı belirttik.

border-style: dotted solid double;

Üst kenar – dotted,
Sağ ve Sol kenar – solid,
Alt kenar – double,

Bu kullanımda 4. kenarı yazmadık. Bu kenar solu işaret ettiği için tam tersi olan Sağ taraftaki özelliği alacaktır.

border-style: dotted solid;

Üst kenar ve alt kenar – dotted,
Sağ ve Sol kenar – solid,
Bu kullanımda Yukarı – Aşağı kenarlar ilk yazılan dotted, Sol ve Sağ kenarlar ikinci yazılan solid biçiminde olacaktır.

Kenar Belirtmenin Kısa Yolu
Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneğe bakalım:
[code type=css]
.kutum {
border: 1px #0000CC solid;
}

[/code]

Buradaki örnekte yer alan üç kodu tek bir kodda birleştirdik. Sırasıyla önce border-width değerini yazdık, sonra border-color ve en son border-style ile üç özelliği birlikte kullandık.

Bu kısayolu da kenarlara ayrı ayrı uygulamanız mümkün. Bu komutlar:

[code type=css]
border-left – Sol kenar
border-right – Sağ kenar
border-top – Üst kenar
border-bottom – Alt kenar
[/code]