CSS - Border (Kenarlık) Kullanımı

CSS’te border etiketini hedeflenen bir öğenin sınırlarını belirlemede, şekli, rengini ve genişliği gibi değerler vermek için kullanırız. CSS border(kenar) çizgisi özellikleri ile kenar çizgisi biçimi, rengi ve kalınlığı ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu özellikler şunlardır;

border - Temel kenarlık için kullanılır.
border-style - Kenar çizgisi
border-top-style - Üst kenar çizgisi
border-right-style - Sağ kenar çizgisi
border-bottom-style - Alt kenar çizgisi
border-left-style - Sol kenar çizgisi
border-width - Kenar çizgi genişliği-kalınlığı
border-top-width - Üst kenar çizgi genişliği-kalınlığı
border-right-width - Sağ kenar çizgi genişliği-kalınlığı
border-bottom-width - Alt kenar çizgi genişliği-kalınlığı
border-left-width - Sol kenar çizgi genişliği-kalınlığı
border-color - Kenar çizgi rengi
border-top-color - üst kenar çizgi rengi
border-right-color - sağ kenar çizgi rengi
border-bottom-color - alt kenar çizgi rengi
border-left-color - sol kenar çizgi rengi

CSS Kenar Biçimleri

Kenar çizginin nasıl olacağını (noktalı, kesik kesik, düz, çift, vb.) belirler Herhangi bir değer yazılmadığı zaman none varsayılan olarak geçerlidir. Aşağıdaki değerleri alabilir;

Not: Kenar biçimlerindeki ayrıntıların daha net görünmesi için altın (gold) rengi kullandık.

dotted: Noktalı kenarlık vermek için kullanılır.

dashed: Kesikli kenarlık vermek için kullanılır.

solid: Düz kenarlık vermek için kullanılır.

double: Çift kenarlık vermek için kullanılır.

groove: 3B oluklu kenarlık vermek için kullanılır.

ridge: 3B düz kenarlık vermek için kullanılır.

inset: 3D yerleştirme kenarlık vermek için kullanılır.

outset: 3D başlangıç kenarlık vermek için kullanılır.

none: Kenarlık vermez.

hidden: Gizli bir kenarlık vermek için kullanılır.

Yukarıdaki kenarlıkların bir de kodlarını inceleyelim...

[code type="CSS"].kutu-dotted { width:100%; border:4px dotted gold; margin-bottom:8px; } .kutu-dashed { width:100%; border:4px dashed gold; margin-bottom:8px; } .kutu-solid { width:100%; border:4px solid gold; margin-bottom:8px; } .kutu-double { width:100%; border:4px double gold; margin-bottom:8px; } .kutu-groove { width:100%; border:4px groove gold; margin-bottom:8px; } .kutu-ridge { width:100%; border:4px ridge gold; margin-bottom:8px; } .kutu-inset { width:100%; border:4px inset gold; margin-bottom:8px; } .kutu-outset { width:100%; border:4px outset gold; margin-bottom:8px; } .kutu-none { width:100%; border:4px none; margin-bottom:8px; } .kutu-hidden { width:100%; border:4px hidden; margin-bottom:8px; }[/code] [code type="HTML"]<div class="kutu-dotted"><center><b>dotted</b>: Noktalı kenarlık vermek için kullanılır.</center></div> <div class="kutu-dashed"><center><b>dashed</b>: Kesikli kenarlık vermek için kullanılır.</center></div> <div class="kutu-solid"><center><b>solid</b>: Düz kenarlık vermek için kullanılır.</center></div> <div class="kutu-double"><center><b>double</b>: Çift kenarlık vermek için kullanılır.</center></div> <div class="kutu-groove"><center><b>groove</b>: 3B oluklu kenarlık vermek için kullanılır.</center></div> <div class="kutu-ridge"><center><b>ridge</b>: 3B düz kenarlık vermek için kullanılır.</center></div> <div class="kutu-inset"><center><b>inset</b>: 3D yerleştirme kenarlık vermek için kullanılır.</center></div> <div class="kutu-outset"><center><b>outset</b>: 3D başlangıç kenarlık vermek için kullanılır.</center></div> <div class="kutu-none"><center><b>none</b>: Kenarlık vermez.</center></div> <div class="kutu-hidden"><center><b>hidden</b>: Gizli bir kenarlık vermek için kullanılır.</center></div>[/code]

Kenarları Ayrı Ayrı Şekillendirmek

İstiyorsak yukarı (top), aşağı (bottom), sağ (right) ve sol (left) kenarları ayrı ayrı biçimlendire biliriz.

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.

Kenar Belirtmenin Kısa Yolu

Sadece border kullanarak da border-width, border-color ve border-style değerlerini belirtmemiz mümkün. Örneği inceleyelim: [code type="CSS"].kutum { border: 1px #0000CC solid; }[/code]

border-radius - Yuvarlak Kenarlık

border-radius etiketi ile kenarlıklarımızı yumuşatabiliriz.

border-radius: Kenarlıklarımızı yumuşatabiliriz.

[code type="CSS"].kutu-radius { width:100%; border: 2px solid gold; border-radius: 25px; margin-bottom:8px; }[/code] [code type="HTML"]<div class="kutu-radius"><center><b>border-radius</b>: Kenarlıklarımızı yumuşatabiliriz.</center></div>[/code]
Bu içerik Harun İstenci tarafından aşağıda belirtilmiş olan kategoriler altında oluşturulmuş ve yayınlanmıştır. İçeriğin kopyalanması 5846 sayılı Fikir ve Sanat Eserleri Kanunu'na göre suçtur. | İstenci Systems

Ana Sayfa CSS Eğitimleri Eğitim CSS - Border (Kenarlık) Kullanımı

Harun İstenci Hakkında
1997 yılında İstanbul'da dünyaya geldi ve memleketi Kastamonu. Çocukluğundan bu yana bilgisayar sistemleri üzerinde çalışıyor ve internet üzerinde içerik üretiyor...

Harun İstenci Resmi Web Sitesi

Hakkında Daha Fazla >