Önceki yazılarda yer alan örneklerde her kenar için farklı kenarlık belirlemenin mümkün olduğunu gördünüz.
CSS’de ayrıca kenarlıkların her birini (üst, sağ, alt ve sol) belirtmeye yönelik özellikler de vardır:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>2 farklı kenar stili.</p>
</body>
</html>
Yukarıdaki örnek aşağıdaki kodla aynı sonucu verir.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<p>2 farklı kenar stili.</p>
</body>
</html>İşte şu şekilde çalışıyor:
border-style özelliğinin dört değeri varsa:
border-style: dotted solid double dashed;
- üst kenar noktalı
- sağ kenarlık düz çizgi
- alt kenarlık çift çizgi
- sol kenarlık kesikli
border-style özelliğinin üç değeri varsa:
border-style: dotted solid double;
- üst kenar noktalı
- sağ ve sol kenarlıklar düz çizgi
- alt kenarlık çift çizgi
border-style özelliğinin iki değeri varsa:
border-style: dotted solid;
- üst ve alt kenarlıklar noktalı
- sağ ve sol kenarlıklar düz çizgi
border-style özelliğinin bir değeri varsa:
border-style: dotted;
- dört kenarlığın tümü noktalı
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* 4 değer */
p.four {
border-style: dotted solid double dashed;
}
/* 3 değer */
p.three {
border-style: dotted solid double;
}
/* 2 değer */
p.two {
border-style: dotted solid;
}
/* 1 değer */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<p class="four">4 değer.</p>
<p class="three">3 değer.</p>
<p class="two">2 değer.</p>
<p class="one">1 değer.</p>
</body>
</html>Not : Yukarıdaki örnekte border-style özelliği kullanılmıştır. Ancak border-width ve border-color kodlarıyla da aynı işlemi yapmak mümkündür.
