CSS Bilgileri -10- CSS Çerçeveler

13 Şubat 2019· 1 dk okuma· güncellendi 14 Şubat 2019

Bu yazı 2019 yılında yazıldı ve bu sitenin bugünkü doğrulama hattından geçmedi. Teknik ayrıntılar o günün koşullarını yansıtıyor olabilir.

Merhaba,

HTML öğelerinin dikdörtgen modelinde olduğunu belirtmiştik. Bu sayede üst, alt, sağ ve sol kenarları olmak üzere 4 çerçeve alanına sahiplerdir. Tek seferde tüm kenarlara veya ayrı ayrı kenarlara çerçeve uygulamak mümkündür.

Çerçeveler 3 özelliğe sahiptir:

border-type : Çerçeve tipidir. solid , dashed, dotted gibi tipler seçilebilir.

border-color : Çerçeve rengidir. Renk birimleri kullanılabilir.

border-width : Çerçeve kalınlığını belirti. Ölçü birimleri kullanılabilir.

Ve 4 ayrı alana uygulanabilir:

border-top : Üst çerçeveyi belirtir.

border-bottom : Alt çerçeveyi belirtir.

border-left : Sol çerçeveyi belirtir.

border-right : Sağ çerçeveyi belirtir.

Örnek kullanım:

```

.cerceve { border-color: red; border-style: dashed; border-width: 1px; }

```

Bu classı kullandığımız öğe, kırmızı, çizikli, 1px genişliğinde bir çerçeveye sahip olur. Bunu tek bir css kodu ile de tanımlayabilirdik:

```

.cerceve{ border: 1px dashed red; }

```

Bu şekilde de aynı sonucu alabiliriz. Hiç bir fark olmayacaktır.

İkisinden birini seçip aşağıdaki HTML kodumuza uygulayalım:

```

Bu yazımız çerçeveli olacak.

```

Görünümü:

![](https://www.oktetik.com/wp-content/uploads/2019/02/cerceve-onizleme.jpg)

Veya sadece bir kenara ekleyebiliriz:

```

.cerceve{ border-bottom: 1px dashed red; }

```

Görünümü:

![](https://www.oktetik.com/wp-content/uploads/2019/02/tek-cerceve-onizleme.jpg)

Veya sadece bir kenarı hariç tutabiliriz:

```

.cerceve{ border: 1px dashed red; border-bottom:none;}

```

Görünümü:

![](https://www.oktetik.com/wp-content/uploads/2019/02/tek-eksik-cerceve-onizleme.jpg)

Kullanacağınız yere göre istediğiniz şekilde kullanmakta özgürsünüz.