Property border-style digunakan untuk menampilkan beragam style border di CSS.
Silahkan cek beragam style border.
Lebar Border
Property border-width digunakan untuk memberikan lebar pada border.
Lebar didefinisikan dengan pixel, juga terdapat 3 pilihan yaitu : thin, medium atau thick.
Catatan : Property “border-width” tidak dapat bekerja apabila berdiri sendiri. Anda harus mendefinisikan property “border-style” terlebih dahulu sebelum menggunakan border-width.
Contoh
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Warna Border
Property border-color digunakan untuk memberikan warna pada border. Terdapat 3 cara untuk mendefinisikan warna yaitu :
- nama – mendefinisikan dengan nama warna, seperti “red”
- RGB – mendefinisikan dengan kode warna RGB, seperti “rgb(255,0,0)”
- Hex – mendefinisikan dengan kode warna hex, seperti “#ff0000”
Anda juga dapat mengatur warna border dengan “transparent”.
Catatan : Property “border-color” tidak dapat bekerja apabila berdiri sendiri. Anda harus mendefinisikan property “border-style” terlebih dahulu sebelum menggunakan border-color.
Contoh
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Border – Spesifik Border
Dengan CSS Anda dapat menampilkan border dengan tampilan berbeda disetiap sisinya.
Contoh
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}