CSS Kenarlık Her Yanda

CSS Kenarları - Tek Kenar

Önceki bölümdeki örneklerden, her bir yan için farklı çizgiler belirleyebileceğinizi gördünüz.

CSS'te, her bir çizgiyi (üst, sağ, alt ve sol) belirlemek için bazı özellikler kullanılabilir:

Örnek

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Sonuç:

Farklı çizgi stilleri

Kişisel olarak deneyin

Farklı çizgi stilleri

Örnek sonuç bu ile aynıdır:

Örnek

p {
  border-style: dotted solid;
}

Kişisel olarak deneyin

Çalışma prensibi şu şekilde:

Sağ ve sol çerçeve kalın çizgilerle border-style Özellikler dört değer ayarlanır:

border-style: dotted solid double dashed;

  • Üst çizgi ince çizgili
  • Sağ çizgi kalın çizgili
  • Alt çizgi çift
  • Sol çizgi ince çizgili

Sağ ve sol çerçeve kalın çizgilerle border-style Özellikler üç değer ayarlanır:

border-style: dotted solid double;

  • Üst çizgi ince çizgili
  • Üst ve alt çerçeve kesik çizgilerle
  • Alt çizgi çift

Sağ ve sol çerçeve kalın çizgilerle border-style 属性设置两个值：

border-style: dotted solid;

  • Özelliği iki değerle ayarlanır:
  • Üst ve alt çerçeve kesik çizgilerle

Sağ ve sol çerçeve kalın çizgilerle border-style Özelliği bir değerle ayarlanır:

border-style: dotted;

  • Dört kenarın hepsi kesik çizgilerle

Örnek

/* Dört değer */
p {
  border-style: dotted solid double dashed; 
}
/* Üç değer */
p {
  border-style: dotted solid double; 
}
/* İki değer */
p {
  border-style: dotted solid; 
}
/* Bir değer */
p {
  border-style: dotted; 
}

Kişisel olarak deneyin

örneklerinde kullanılan border-style Özelliği. Ancak border-width ve border-color aynı zamanda uygundur.