Border adalah garis tepi sebuah elemen html seperti box, tabel, image dan sebagainya. Border dalam kehidupan sehari-hari mirip dengan bingkai. Pada CSS disediakan beberapa properti untuk membuat dan mengatur style tampilan border. Properti-properti tersebut meliputi memilih style border, menentukan ukuran lebar border, warna border dan beberapa elemen border.
Berikut ini beberapa properti CSS untuk border dan penjelasannya :
1.border-style
Adalah properti CSS yang digunakan untuk mengatur style sebuah border. Properti ini merupakan properti utama dan merupakan syarat agar properti yang lain dapat bekerja.
Ada beberapa nilai yang bisa diset untuk border-style, yaitu :
| Nilai | Keterangan |
|---|---|
| none | tanpa garis border |
| dotted | garis border titik-titik .. |
| dashed | garis border strip-strip — |
| solid | garis border penuh |
| double | border dengan dua garis penuh |
| groove | garis border efek alur 3D |
| ridge | garis border dengan efek bukit / bubungan * |
| inset | garis border dengan efek menjorok ke dalam * |
| outset | garis border dengan efek menjorok ke luar * |
Note :
* efek groove, risge, inset dan outset bergantung pada penggunaan warna pada properti border-color.
Contoh penggunaan CSS border-style :
div {
border-style: solid;
}
Kita bisa berlatih CSS border-style disini >>
2. border-width
Adalah properti CSS yang digunakan untuk mengatur lebar border. Nilai properti width dinyatakan dalam px (pixel atau bisa juga dengan tiga preset border thin, medium, dan thick. Seperti yang telah dijelaskan tadi, bahwa untuk menggunakan css border-width harus setelah border-style.
Contoh penggunaan CSS border-width :
div {
border-style: solid;
border-width: 1px;
}
Kita bisa berlatih CSS border-width disini >>
3. border-color
Adalah properti CSS yang digunakan untuk mengatur warna border. Seperti border-width, sebelum menggunakan properti border-color harus diset dulu properti style.
Ada tiga cara dalam menentukan nilai warna, yaitu :
- menggunakan nama warna seperti red, blue, green dan sebagainya
- menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
- menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.
Contoh penggunaan CSS border-color :
div {
border-style: solid;
border-color: #98bf21;
}
Kita bisa berlatih CSS border-color disini >>
4. border-style individual
Adalah properti CSS yang digunakan untuk mengatur style tiap-tiap sisi border. Ada dua cara dalam menuliskan CSS border-style individual yaitu dengan cara langsung pada border style atau dengan properti tersendiri.
Cara langsung bisa dikakukan pada properti border-style dengan cara memisahkan masing-masing nilai dengan spasi. Urutan sisi pada penulisan nilai adalah atas, kanan, bawah dan kiri.
Contoh penggunaan CSS border-style individual secara langsung :
div {
border-style: solid dashed dotted dashed;
}
Kita bisa berlatih CSS border-style individual langsung disini >>
Cara kedua dilakukan dengan mengeset langsung dengan properti tersendiri.
Ada empat properti border-style individual :
- border-top-style, untuk mengatur sisi atas
- border-right-style, untuk mengatur sisi kanan
- border-bottom-style, untuk mengatur sisi bawah
- border-left-style, untuk mengatur sisi kiri
Contoh penggunaan CSS border-style individual :
div {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: dashed;
}
Kita bisa berlatih CSS border-style individual tidak langsung disini >>
5. border
Adalah properti yang merupakan penggabungan dari masing-masing properti diatas. Ini merupakan cara singkat untuk menulis CSS border.
Contoh penggunaan CSS border :
div {
border: 1px solid #98bf21;
}
Kita bisa berlatih CSS border disini >>
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
