Thuộc tính border-color

Thuộc tính border-color đặt màu viền cho tất cả các phía cùng một lúc hoặc riêng biệt cho từng phía. Giá trị của thuộc tính là bất kỳ đơn vị cho màu sắc nào. Giá trị mặc định: màu giống như màu văn bản của khối.

Thuộc tính này là thuộc tính viết tắt cho các thuộc tính sau: border-left-color, border-right-color, border-top-color, border-bottom-color.

Cú pháp

bộ chọn {
	border-color: màu;
}

Số lượng giá trị

Thuộc tính có thể nhận 1, 2, 3 hoặc 4 giá trị, được chỉ định cách nhau bởi dấu cách:

Số lượng	Mô tả
`1`	Kiểu cho tất cả các phía cùng một lúc.
`2`	Giá trị đầu tiên cho phía trên và dưới, giá trị thứ hai - cho viền trái và phải.
`3`	Giá trị đầu tiên cho phía trên, giá trị thứ hai - cho viền trái và phải, giá trị thứ ba - cho phía dưới.
`4`	Giá trị đầu tiên cho viền trên, giá trị thứ hai - cho viền phải, giá trị thứ ba - cho viền dưới, giá trị thứ tư - cho viền trái.

Ví dụ

Hãy tô viền của khối thành màu đỏ:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red;
	width: 300px;
	height: 100px;
}

Ví dụ

Đặt viền màu đỏ cho phía trên và dưới, còn viền màu xanh lam cho phía phải và trái:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue;
	width: 300px;
	height: 100px;
}

Ví dụ

Đặt viền màu đỏ cho phía trên, màu xanh lam cho phía phải, màu xanh lá cây cho phía dưới, màu đen cho phía trái:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Ví dụ

Đặt đồng thời độ dày, kiểu và màu viền khác nhau:

<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;
}

Ví dụ

Nếu màu viền không được đặt trong border-color - nó sẽ được lấy từ thuộc tính color:

<div id="elem"></div>

#elem {
	color: red;
	border-style: solid;
	border-width: 2px;
	width: 300px;
	height: 100px;
}

Xem thêm

thuộc tính border-width,
thiết lập độ dày viền
thuộc tính border-style,
thiết lập kiểu viền
thuộc tính border,
là thuộc tính viết tắt cho viền