Kenarlık temelleri

border-width, border-style ve border-color özelliklerini öğrenirsin.

Kenarlık nedir?

Bir kenarlık (border), kutunun içerik ve iç boşluk katmanının dışına çizilen çerçevedir. Üç temel özellik birlikte çalışır: border-width kalınlığı, border-style çizgi tipini ve border-color rengi belirler.

Üç özellikten yalnızca border-style zorunludur. Tip none olursa kalınlık ve renk verilmiş olsa bile kenarlık çizilmez. Bu yüzden görünür bir kenarlık için önce bir tip seçersin.

border-style değerleri

border-style en sık kullanılan birkaç değer alır. solid tek kesintisiz çizgi, dashed kısa çizgiler, dotted noktalar, double iki paralel çizgi çizer.

İki özel değer daha vardır: none kenarlığı tamamen kaldırır, hidden ise onu gizler ama yine de tablo hücrelerinde çakışma çözer. Çoğu durumda solid en temiz sonucu verir.

Uygulama Düğmeye kenarlık ver

.button seçicisi için bir bildirim bloğu yaz. İçine border-width, border-style ve border-color bildirimlerini ekle. Örneğin border-width: 2px, border-style: solid ve border-color: #3366cc.

Örnek çözümü göster

/* düğme kenarlığını ekle */
.button {
  border-width: 2px;
  border-style: solid;
  border-color: #3366cc;
}

Kendini test et

Kenarlığın çizgi tipini (solid, dashed, dotted) hangi özellik belirler?
- border-color
- border-style
- border-width
- background-color
Cevabı göster

border-style — Doğru. border-style çizgi tipini belirler; solid, dashed, dotted gibi değerler alır.

Kesintisiz kenarlık tipini yaz

.box {
  border-width: 2px;
  border-style: ____;
  border-color: #444;
}

Cevabı göster

.box {
  border-width: 2px;
  border-style: solid;
  border-color: #444;
}

Özelliği göreviyle eşleştir

border-width

Kenarlık kalınlığı
border-style

Çizgi tipi
border-color

Kenarlık rengi

Sıradaki ders: Kenarlık kısayolu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler