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:

<p class="cerceve">Bu yazımız çerçeveli olacak.</p>

Görünümü:

Veya sadece bir kenara ekleyebiliriz:

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

Görünümü:

Veya sadece bir kenarı hariç tutabiliriz:

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

Görünümü:

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