CSS Border

 Boder Width

Property border-width digunakan untuk menentukan tebalnya boder pada suatu element html, valuenya ada 4 sisi, yaitu border-width untuk top, right, bottom dan left, tetapi jika valuenya cuma ada 1, maka nilai border-width untuk ke empat sisi tersebut adalah sama.
Contoh code :
border-width 2px;
border-width 2px 4px 2px 4px;

Border Style

digunakan untuk memberikan style pada tampilan border, property yang digunakan adalah border-style diikuti oleh opsi value : dotted, double, groove, solid.
Contoh code:
border-style:solid;

Border Color

digunakan untuk memberikan warna terhadap border yang digunakan, dengan property border-color dan valuenya adalah warna yang telah dipelajari sebelumnya css color
Contoh code:
border-color: green;

Border Side

Jika suatu kondisi kita menginginkan tampilan sisi border yang berbeda dengan sisi lainnya, kita gunakan border side dengan property border-top-style, border-right-style, border-bottom-style dan border-left-style, dengan opsi value yang sama dengan opsi border style.

Border Rounded

Border dengan sudut yang melengkung dapat dibuat dengan property border-radius, valuenya diisi dengan besarnya rounded yang diinginkan dapat menggunakan satuan px atau satuan yg lainnya, contoh codenya adalah:
border-radius: 20px;

Border Shorthand

Seperti property css background, border yang mempunyai shorthand, border juga mempunya shorthand dengan urutan sebagai berikut:

• border-width
• border-style
• border color

Contoh coding untuk semua property di atas dapat dilihat pada contoh file html dan css di bawah ini:

Jika file html tersebut dijalankan di browser, maka tampilannya akan seperti gambar di bawah ini :

Demikian dokumentasi belajar css untuk property border.