Outline adalah sebuah garis tepi diluar border. Outline terpisah dari elemen, hal ini berbeda dengan border yang measih merupakan bagian dari sebuah elemen. Garis outline dibentuk melingkari elemen dan membuat elemen berada didalam area outline.
Pada CSS disediakan beberapa properti untuk mengatur style outline diantaranya outline-style, outline-color dan outline-width. Penggunaan properti ini mirip dengan penggunaan CSS pada border.
Berikut ini beberapa properti CSS untuk outline dan penjelasannya :
1.outline-style
Adalah properti CSS yang digunakan untuk mengatur style outline. Ini merupakan properti utama dan merupakan syarat agar properti yang lain dapat bekerja.
Ada beberapa nilai yang bisa diset untuk outline-style, yaitu :
| Nilai | Keterangan |
|---|---|
| none | tanpa outline |
| hidden | garis outline tersembunyi |
| dotted | garis outline titik-titik .. |
| dashed | garis outline strip-strip — |
| solid | outline garis penuh |
| double | outline dengan dua garis penuh |
| groove | garis outline efek alur 3D |
| ridge | garis outline dengan efek bukit / bubungan * |
| inset | garis outline dengan efek menjorok ke dalam * |
| outset | garis outline dengan efek menjorok ke luar * |
Note :
* efek groove, risge, inset dan outset bergantung pada penggunaan warna pada properti outline-color.
Contoh penggunaan CSS outline-style :
div {
outline-style: dotted;
}
Kita bisa berlatih CSS ouline-style disini >>
2. outline-width
Adalah properti CSS yang digunakan untuk mengatur lebar outline. Nilai properti width dinyatakan dalam px (pixel atau bisa juga dengan tiga preset outline thin, medium, dan thick. Seperti yang telah dijelaskan tadi, bahwa untuk menggunakan css border-width harus setelah border-style.
Contoh penggunaan CSS outline-width :
div {
outline-style: dotted;
outline-width: 1px;
}
Kita bisa berlatih CSS outline-width disini >>
3. outline-color
Adalah properti CSS yang digunakan untuk mengatur warna outline. Seperti outline-width, sebelum menggunakan properti outline-color harus diset dulu properti outline-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 outline-color :
div {
outline-style: dotted;
outline-color: #f9c566;
}
Kita bisa berlatih CSS outline-color disini >>
6. outline
Adalah properti yang merupakan penggabungan dari masing-masing properti diatas. Ini merupakan cara singkat untuk menulis CSS outline.
Contoh penggunaan CSS outline :
div {
outline: 2px dotted #f9c566;
}
Kita bisa berlatih CSS outline disini >>
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
