CSS Border, dari A sampai Zet

Berikut ini adalah beberapa jenis border yang paling umum digunakan:

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: inset;

border-style: outset;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: none;

Properti border dibagi menjadi tiga aspek:

• border-width
• border-style
• border-color

• border-width:
  border-width digunakan untuk menentukan tebal border. Umumnya menggunakan satuan piksel, atau bisa juga menggunakan ukuran relatif: thin (tipis), medium (sedang), atau thick (tebal).
• border-style:
  border-style digunakan untuk menentukan tipe border.
• border-color:
  border-color digunakan untuk menentukan warna border. Umumnya menggunakan warna HEX, atau bisa juga menggunakan warna RGB atau menuliskan nama warna secara langsung.

Contoh Penerapan

Top-Down	Inline
<style type='text/css'> #contoh-border { border-width:4px; border-style:solid; border-color:#ffa500; } </style> ...... <div id='contoh-border'>OBJEK</div>	<div style='border-width:4px;border-style:solid;border-color:#ffa500;'> OBJEK </div>

Menggabungkan Tiga Deklarasi Border dalam Satu Properti

Properti border-width, border-style dan border-color bisa digabungkan dalam satu properti saja yaitu border, dengan urutan seperti berikut:

border: 4px solid #ffa500;
border: border-width border-style border-color;

Memecah Border Menjadi Empat Sisi

Properti border juga bisa dipecah menjadi empat sisi seperti ini:

Deklarasi	Keterangan
border-top: 4px solid #ffa500;	Menentukan tampilan border sebelah atas
border-right: 4px solid #ffa500;	Menentukan tampilan border sebelah kanan
border-bottom: 4px solid #ffa500;	Menentukan tampilan border sebelah bawah
border-left: 4px solid #ffa500;	Menentukan tampilan border sebelah kiri

Penerapan yang lebih detail dapat menggunakan teori yang pertama, dengan dua jenis metode pemecahan sisi:

Deklarasi	Keterangan
border-top-width: 4px;	Menentukan tebal border sebelah atas
border-right-width: 4px;	Menentukan tebal border sebelah kanan
border-bottom-width: 4px;	Menentukan tebal border sebelah bawah
border-left-width: 4px;	Menentukan tebal border sebelah kiri
border-top-style: solid;	Menentukan tipe border sebelah atas
border-right-style: solid;	Menentukan tipe border sebelah kanan
border-bottom-style: solid;	Menentukan tipe border sebelah bawah
border-left-style: solid;	Menentukan tipe border sebelah kiri
border-top-color: #ffa500;	Menentukan warna border sebelah atas
border-right-color: #ffa500;	Menentukan warna border sebelah kanan
border-bottom-color: #ffa500;	Menentukan warna border sebelah bawah
border-left-color: #ffa500;	Menentukan warna border sebelah kiri

Deklarasi	Keterangan
border-width: 4px 2px 7px 0px;	Urutan valuenya adalah: top right bottom left
border-style: solid dotted dashed none;
border-color: red green blue orange;