HTML elemanının kenarlarına çizgi çekerken kullanacağınız kodlar:
[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]