Thuộc tính outline-style

Thuộc tính outline-style thiết lập kiểu dáng đường viền ngoài - đường viền không chiếm không gian.

Cú pháp

bộ chọn {
	outline-style: 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 đường gờ lồi.
`double`	Đường viền dạng đường kẻ đôi. Để thấy hiệu ứng, độ dày đường viền phải tối thiểu là `3px`.
`groove`	Đường viền lõm.
`inset`	Đường viền lõm vào trong.
`outset`	Đường viền lồi ra ngoài.
`none`	Không có đường viền.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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