CSS border nedir?

CSS border, bir HTML öğesinin içerik ve dolgu alanını çevreleyen kenarlığı tanımlayan özelliktir. Kenarlığın kalınlığını, çizgi tipini ve rengini belirlemek için kullanılır. Örneğin border: 1px solid #ccc; kodu, öğenin dört tarafına 1 piksel kalınlığında düz ve gri bir kenarlık ekler.

Temel kullanım​

Kenarlığın görünmesi için çizgi stili none veya hidden olmamalıdır. Kalınlık ve renk belirtilmezse varsayılan değerler kullanılır; okunabilir bir örnekte üçünü birlikte yazmak pratiktir. En küçük tam örnek şöyledir:


Bu kodu bir HTML dosyasına yerleştirip tarayıcıda açtığınızda, “Ürün açıklaması” metninin çevresinde koyu renkli düz bir kenarlık görünür. Kenarlık görünmüyorsa öncelikle border-style değerinin none olmadığını ve CSS seçicisinin doğru öğeyi hedeflediğini kontrol edin. border-width ve border-color tek başına yazıldığında, stil belirtilmemişse beklenen çizgi oluşmayabilir.

Border nasıl çalışır?​

border için yaygın yazım şöyledir; bu üç bileşenin sırası zorunlu değildir:


Örneğin:


Buradaki 1px kalınlığı, solid çizgi tipini, #d0d7de ise rengi belirtir. Border, öğenin kutu modelinde içerik ve padding alanının dışında yer alır. Bu nedenle kenarlık eklemek, varsayılan kutu modeli kullanılırken öğenin toplam genişliğini ve yüksekliğini artırabilir.

Bunu daha öngörülebilir yapmak için çoğu projede şu kural tercih edilir:


Bu ayarla width ve height değerleri, içerik, padding ve border birlikte hesaba katılarak yorumlanır.

Hangi border yazımı ne zaman kullanılmalı?​

Tüm kenarlıklar aynıysa kısaltılmış yazım daha pratiktir. Yalnızca belirli bir tarafı biçimlendirmek için yön özelliklerini kullanın:


Aşağıdaki özellikler farklı ihtiyaçları ayırır:


solid düz çizgi, dashed kesikli çizgi, dotted noktalı çizgi oluşturur. double gibi başka stiller de kullanılabilir; ancak okunabilirlik için çizgi tipi ile arka plan ve metin arasında yeterli renk karşıtlığı bırakılmalıdır.

Uygularken izlenecek adımlar​

1. Kenarlığın hangi HTML öğesine uygulanacağını belirleyin ve sınıf seçicisini açıkça yazın.
2. Önce border: 1px solid renk; biçiminde temel bir kenarlık tanımlayın.
3. Yalnızca bir taraf farklı olacaksa border-left, border-bottom gibi yön özellikleriyle üzerine yazın.
4. Kenarlığın kutunun toplam boyutunu etkileyip etkilemediğini kontrol edin; sabit ölçü kullanıyorsanız box-sizing: border-box uygulayın.
5. Kenar ile metin arasındaki boşluk için border yerine padding kullanın. Dışarıdaki boşluk gerekiyorsa margin ekleyin.

Sık yapılan hata, boşluk ihtiyacını border kalınlığını artırarak çözmeye çalışmaktır. Border görsel çizgidir; içerikle çizgi arasındaki alan padding, öğeyle çevresindeki diğer öğeler arasındaki alan ise margin ile ayarlanır. Bir başka hata da border: none ile önceki kenarlık tanımını istemeden kaldırmaktır. Stillerin sırasını ve seçici özgüllüğünü kontrol ederek bu çakışmayı giderin.

Kaynaklar​

• MDN: border

Sık sorulan sorular​

Border ile outline arasındaki fark nedir?​

border kutu modelinin parçasıdır ve öğenin boyutunu etkileyebilir. outline ise genellikle kutunun dışına çizilir ve normalde kutu boyutuna dahil edilmez. Odak durumlarını göstermek için outline kullanımı özellikle yararlıdır.

Sadece alt kenarlık nasıl eklenir?​

border-bottom: 1px solid #ccc; yazılır. Bu yöntem menü öğeleri, başlıklar ve ayırıcı çizgiler için tüm kenarlığı kullanmaktan daha uygundur.

Neden başlangıçta şeffaf kenarlık ayrılır?​

Normal durumda border: 2px solid transparent; tanımlayıp hover veya seçim durumunda yalnız border-color değerini değiştirirseniz sonradan yeni kenarlık eklemekten kaynaklanan ölçü değişimini azaltırsınız. Şeffaf kenarlık da kutu modeline dahildir. box-sizing: border-box toplam ölçünün hesabını düzenler; kenarlık için önceden yer ayırma işlevinin aynısı değildir.