Thuộc tính border-style

Thuộc tính border-style thiết lập kiểu đường viền cho tất cả các cạnh cùng một lúc hoặc riêng biệt cho từng cạnh. Là một thuộc tính viết tắt cho các thuộc tính sau: border-left-style, border-right-style, border-top-style, border-bottom-style.

Cú pháp

bộ chọn {
	border-style: giá trị;
}

Giá trị

Giá trị	Mô tả
`solid`	Đường liền nét.
`dotted`	Đường viền dạng chấm.
`dashed`	Đường viền dạng gạch ngang.
`ridge`	Đường viền dạng lồi lên.
`double`	Đường viền dạng đôi. Để thấy được hiệu ứng, độ dày đường viền phải ít nhất là `3px`.
`groove`	Đường viền lõm vào.
`inset`	Đường viền bị ấn vào.
`outset`	Đường viền nổi lên.
`none`	Không có đường viền.

Giá trị mặc định: none.

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 cạnh cùng một lúc.
`2`	Giá trị đầu tiên cho cạnh trên và dưới, giá trị thứ hai - cho cạnh trái và phải.
`3`	Giá trị đầu tiên cho cạnh trên, giá trị thứ hai - cho cạnh trái và phải, giá trị thứ ba - cho cạnh dưới.
`4`	Giá trị đầu tiên cho cạnh trên, giá trị thứ hai - cho cạnh phải, giá trị thứ ba - cho cạnh dưới, giá trị thứ tư - cho cạnh trái.

Ví dụ . Giá trị solid

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

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

Ví dụ . Giá trị dotted

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

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

Ví dụ . Giá trị dashed

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

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

Ví dụ . Giá trị ridge

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

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ví dụ . Giá trị double

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

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ví dụ . Giá trị groove

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

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ví dụ . Giá trị inset

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

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ví dụ . Giá trị outset

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

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Ví dụ

Trong ví dụ này, các kiểu đường viền khác nhau được thiết lập cho các cạnh khác nhau của phần tử:

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

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

Ví dụ

Và bây giờ cho các cạnh khác nhau của phần tử cũng được thiết lập độ dày đường viền và màu sắc 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ụ

Bây giờ cho cạnh trên và dưới được thiết lập kiểu solid, còn cho cạnh phải và trái - dotted:

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

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

Xem thêm

thuộc tính border-color,
thiết lập màu sắc đường viền
thuộc tính border-width,
thiết lập độ dày đường viền
thuộc tính border,
là thuộc tính viết tắt cho đường viền