CSS Kenarlıkları
CSS kenarlık özellikleri, bir öğenin kenarlığının stilini, genişliğini ve rengini belirtmenize olanak tanır.
Her tarafta sınırlarım var.
Kırmızı bir alt sınırım var.
Yuvarlak sınırlarım var.
CSS Kenarlık Stili
Özellik border-style
, ne tür bir kenarlığın görüntüleneceğini belirtir.
Aşağıdaki değerlere izin verilir:
dotted
- Noktalı bir kenarlık tanımlardashed
- Kesikli bir kenarlık tanımlarsolid
- Katı bir sınır tanımlardouble
- Çift kenarlık tanımlargroove
- 3B oluklu bir kenarlık tanımlar. Etki, kenarlık rengi değerine bağlıdırridge
- 3B çıkıntılı kenarlık tanımlar. Etki, kenarlık rengi değerine bağlıdırinset
- Bir 3B iç kenarlık tanımlar. Etki, kenarlık rengi değerine bağlıdıroutset
- Bir 3B başlangıç sınırı tanımlar. Etki, kenarlık rengi değerine bağlıdırnone
- Sınır tanımlamazhidden
- Gizli bir sınır tanımlar
Özellik border-style
bir ila dört değere sahip olabilir (üst kenarlık, sağ kenarlık, alt kenarlık ve sol kenarlık için).
Örnek
Farklı kenarlık stillerinin gösterimi:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Sonuç:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Not: DİĞER CSS kenarlık özelliklerinin hiçbiri (daha sonraki bölümlerde hakkında daha fazla bilgi edineceksiniz),
border-style
özellik ayarlanmadıkça HERHANGİ bir etkiye sahip olmayacaktır!