Border CSS


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

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Coba »

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

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Coba »

Border – Spesifik Border

Dengan CSS Anda dapat menampilkan border dengan tampilan berbeda disetiap sisinya.

Contoh

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Coba »