CSS Kenarlık

CSS kenar çizim özellikleri

CSS border Özellik, element kenar çizim stillerini, genişliğini ve rengini belirlemenizi sağlar.

Tüm kenarlarımın kenar çizgisi var.

Kırmızı bir alt kenarım var.

Küçük köşeli kenarım var.

Mavi bir sol kenarım var.

CSS kenar çizim stili

border-style Özellik, gösterilecek kenar çizim türünü belirtir.

İzin verilen değerler:

  • noktali - Noktali çizgi kenar tanımlama
  • dağınık - Dağınık çizgi kenar tanımlama
  • sert - Düz çizgi kenar tanımlama
  • çift - Çift kenar tanımlama
  • yarık - 3D yarık kenar tanımlama. Etki, border-color değeriye bağlıdır
  • tepe - 3D tepe kenar tanımlama. Etki, border-color değeriye bağlıdır
  • geri - 3D geri kenar tanımlama. Etki, border-color değeriye bağlıdır
  • çıkıntı - 3D çıkıntı kenar tanımlama. Etki, border-color değeriye bağlıdır
  • yok - Kenar olmayan tanımlama
  • gizli - Gizli kenar tanımlama

border-style Özellik, bir ila dört değeri ayarlayabilir (üst kenar, sağ kenar, alt kenar ve sol kenar için kullanılır).

Örnek

Farklı kenar çizim stillerini gösterin：

p.noktali {border-style: noktali;}
p.dağınık {border-style: dağınık;}
p.sert {border-style: sert;}
p.çift {border-style: çift;}
p.yarık {border-style: yarık;}
p.tepe {border-style: tepe;}
p.geri {border-style: geri;}
p.çıkıntı {border-style: çıkıntı;}
p.yok {border-style: yok;}
p.gizli {border-style: gizli;}
p.mix {border-style: dotted dashed solid double;}

Sonuç:

Noktalı kenarlıklar.

Boş çizgili kenarlıklar.

Düz çizgili kenarlıklar.

Çift çizgili kenarlıklar.

Kesik kenarlıkları. Etkisi border-color değerine bağlıdır.

Dolgu kenarlıkları. Etkisi border-color değerine bağlıdır.

3D inset kenarlıkları. Etkisi border-color değerine bağlıdır.

3D outset kenarlıkları. Etkisi border-color değerine bağlıdır.

Kenarlıksız.

Kenarlıklar gizlenir.

Karışık kenarlıklar.

Kişisel olarak deneyin

Dikkat:ayarlanmadıysa border-style Özellik ayarlanmadıysa, diğer CSS kenarlık özellikleri (gelecek bölümde ayrıntılı olarak anlatılacaktır) hiçbir etkisi olmayacaktır!