Properti border-color
Properti border-color mengatur warna
border untuk semua sisi secara bersamaan atau
terpisah untuk setiap sisi. Nilai dari properti
ini adalah unit apa pun
untuk warna. Nilai default: warna yang
sama dengan teks blok.
Properti ini adalah properti singkatan untuk
properti-properti berikut: border-left-color,
border-right-color,
border-top-color,
border-bottom-color.
Sintaksis
selektor {
border-color: warna;
}
Jumlah Nilai
Properti dapat menerima 1, 2,
3 atau 4 nilai, yang ditentukan
dengan spasi:
| Jumlah | Deskripsi |
|---|---|
1 |
Jenis untuk semua sisi secara bersamaan. |
2 |
Nilai pertama untuk atas dan bawah, nilai kedua - untuk border kiri dan kanan. |
3 |
Nilai pertama untuk atas, nilai kedua - untuk border kiri dan kanan, nilai ketiga - untuk bawah. |
4 |
Nilai pertama untuk border atas, nilai kedua - untuk border kanan, nilai ketiga - untuk border bawah, nilai keempat - untuk border kiri. |
Contoh
Mari kita warnai border blok dengan warna merah:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red;
width: 300px;
height: 100px;
}
:
Contoh
Mari atur border merah untuk sisi atas dan bawah, dan border biru muda untuk sisi kanan dan kiri:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue;
width: 300px;
height: 100px;
}
:
Contoh
Mari atur border merah untuk sisi atas, border biru muda untuk sisi kanan, border hijau untuk sisi bawah, border hitam untuk sisi kiri:
<div id="elem"></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Contoh
Mari atur secara bersamaan ketebalan, tipe dan warna border yang berbeda:
<div id="elem"></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}
:
Contoh
Jika warna border tidak ditentukan dalam border-color
- warnanya akan diambil dari properti color:
<div id="elem"></div>
#elem {
color: red;
border-style: solid;
border-width: 2px;
width: 300px;
height: 100px;
}
:
Lihat juga
-
properti
border-width,
yang mengatur ketebalan border -
properti
border-style,
yang mengatur tipe border -
properti
border,
yang merupakan properti singkatan untuk border