คุณสมบัติ outline-style

คุณสมบัติ outline-style กำหนดสไตล์ ของเส้นขอบภายนอก - เส้นขอบที่ไม่ใช้พื้นที่ ใน layout

ไวยากรณ์

selector {
	outline-style: value;
}

ค่า	คำอธิบาย
`solid`	เส้นทึบ
`dotted`	เส้นขอบแบบจุด
`dashed`	เส้นขอบแบบขีดประ
`ridge`	เส้นขอบแบบนูนขึ้น
`double`	เส้นขอบแบบคู่ เพื่อให้เห็นเอฟเฟกต์ ความหนาของเส้นขอบต้องมีอย่างน้อย `3px`
`groove`	เส้นขอบแบบเว้า
`inset`	เส้นขอบแบบถูกกดลงไป
`outset`	เส้นขอบแบบนูนออกมา
`none`	ไม่มีเส้นขอบ

ค่าเริ่มต้น: 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;
}