Sisi Perbatasan CSS
Perbatasan CSS - Sisi Individu
Dari contoh di halaman sebelumnya, Anda telah melihat bahwa dimungkinkan untuk menentukan batas yang berbeda untuk setiap sisi.
Di CSS, ada juga properti untuk menentukan setiap batas (atas, kanan, bawah, dan kiri):
Contoh
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Hasil:
Different Border Styles
Contoh di atas memberikan hasil yang sama seperti ini:
Contoh
p {
border-style: dotted solid;
}
Jadi, inilah cara kerjanya:
Jika border-style
properti memiliki empat nilai:
- gaya perbatasan: putus-putus padat ganda putus-putus;
- batas atas bertitik
- batas kanan padat
- batas bawah adalah ganda
- batas kiri putus-putus
Jika border-style
properti memiliki tiga nilai:
- gaya perbatasan: dobel padat bertitik;
- batas atas bertitik
- batas kanan dan kiri padat
- batas bawah adalah ganda
Jika border-style
properti memiliki dua nilai:
- gaya perbatasan: padat bertitik;
- batas atas dan bawah bertitik
- batas kanan dan kiri padat
Jika border-style
properti memiliki satu nilai:
- gaya perbatasan: putus-putus;
- keempat perbatasan bertitik
Contoh
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
Properti border-style
digunakan dalam contoh di atas. Namun, ia juga bekerja dengan
border-width
dan border-color
.