CSS kenarlık özelliklerini kullanarak, öğenin kenarlık stilini, genişliğini ve rengini belirleyebiliriz. Hangi kenarlık sitilinin görüneceğini border-style özelliğini kullanarak belirleyebiliriz.
border-style özelliği aşağıdaki değerleri alabilir.
dotted– Noktalı kenarlık ekler.
dashed– Kesik çizgili kenarlık ekler.
solid– Düz çizgili kenarlık ekler.
double– Çift çizgili kenarlık ekler.
groove – 3 boyutlu kenarlık ekler.
ridge– 3 boyutlu kenarlık ekler.
inset– 3 boyutlu kenarlık ekler.
outset– 3 boyutlu kenarlık ekler.
none– Kenarlık yok
hidden– Gizli kenarlık.
Örnek: Aşağıdaki örnekte <p> etiketine CSS ile çeşitli border-style özellikleri verilmiştir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!doctype html> <html> <head> <title>Border Örnekleri</title> <meta charset="utf-8"> <style> 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;} </style> </head> <body> <h2>border-style Özellikleri</h2> <p>Aşağıda border özelliğinin çeşitli kullanımları listelenmiştir.</p> <p class="dotted">Noktalı Kenarlık.</p> <p class="dashed">Kesik Çizgili Kenarlık.</p> <p class="solid">Düz Kenarlık.</p> <p class="double">Çift Kenarlık.</p> <p class="groove">3 boyutlu kenarlık.</p> <p class="ridge">3 boyutlu kenarlık.</p> <p class="inset">3 boyutlu kenarlık.</p> <p class="outset">3 boyutlu kenarlık.</p> <p class="none">Kenarlık yok.</p> <p class="hidden">Gizli kenarlık.</p> <p class="mix">Karma.</p> </body> </html> |
Ekran çıktısı:
