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