Tutorial Kode Css Border

border-style

Properti border-style mendefinisikan gaya dari garis.

Contoh :

p{
border-style:solid;
}

none

dotted

dashed

solid

double

groove

ridge

inset

outset

Anda juga bisa menggunakan 4 nilai border dalam satu konten.
Contoh :

p{
border-style:solid dotted dashed double;
}

4 nilai

Urutannya :

p{
border-style:atas kanan bawah kiri;
}

Atau 3 nilai.
Contoh :

p{
border-style:dashed double solid;
}

3 nilai

Urutannya :

p{
border-style:atas kanan+kiri bawah;
}

Atau 2 nilai.
Contoh :

p{
border-style:dashed double;
}

2 nilai

Urutannya :

p{
border-style:atas+bawah kanan+kiri;
}

Dihafalkan rumusnya !!!. Penggabungan 4, 3, 2 nilai akan sama rumusnya, walau berbeda properti.

---

border-width

Properti border-width digunakan untuk lebar garis. Harus menggunakan properti border-style supaya bisa berfungsi. Anda bisa menggunakan dengan ukuran pixel atau nilai : thin, medium, atau thick.

Contoh :

h1{
border-style:solid;
border-width:5px;
}
h2{
border-style:dotted;
border-width:medium;
}

Properti ini bisa menggunakan 4 nilai.

---

border-color

Properti border-color digunakan untuk warna garis. Harus menggunakan properti border-style supaya bisa berfungsi. Bisa menggunakan nama warna, RGB, dan HEX.

Contoh :

h1{
border-style:solid;
border-color:#black;
}
h2{
border-style:double;
border-color:#ffff00;
}

Properti ini bisa menggunakan 4 nilai.

---

Border Satu Sisi

Anda juga bisa menggunakan Properti satu sisi saja. Walaupun jarang yang menulis seperti ini, memakan banyak waktu, tempat, dll.

Contoh :

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

Bisa digunakan pada : border-style, border-width, border-color, tetapi ditengahnya ditambahkan dengan : top, right, bottom, dan left, seperti contoh diatas.

---

Properti Lebih Singkat

Properti ini yang lebih sering digunakan, karena lebih singkat dan mudah.

Contoh :

h1{
border:3px solid #222;
}

Properti ini juga bisa digunakan satu sisi dengan penambahan properti : top, right, bottom, dan left.
Contoh :

h1{
border-bottom:3px solid #222;
}

Credit Tittle : Nano Yulianto

Read more »