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

คุณสมบัติ border-style กำหนดรูปแบบ เส้นขอบสำหรับทุกด้านพร้อมกันหรือ แยกกันสำหรับแต่ละด้าน เป็นคุณสมบัติแบบย่อ สำหรับคุณสมบัติต่อไปนี้: border-left-style, border-right-style, border-top-style, border-bottom-style.

ไวยากรณ์

selector {
	border-style: value;
}

ค่า

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

ค่าเริ่มต้น: none

จำนวนค่า

คุณสมบัตินี้สามารถรับค่าได้ 1, 2, 3 หรือ 4 ค่า โดยระบุ คั่นด้วยช่องว่าง:

จำนวน	คำอธิบาย
`1`	รูปแบบสำหรับทุกด้านพร้อมกัน
`2`	ค่าแรกสำหรับด้านบนและล่าง ค่าที่สองสำหรับขอบซ้ายและขวา
`3`	ค่าแรกสำหรับด้านบน ค่าที่สองสำหรับขอบซ้ายและขวา ค่าที่สามสำหรับด้านล่าง
`4`	ค่าแรกสำหรับขอบด้านบน ค่าที่สองสำหรับขอบด้านขวา ค่าที่สามสำหรับขอบด้านล่าง ค่าที่สี่สำหรับขอบด้านซ้าย

ตัวอย่าง . ค่า solid

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

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

ตัวอย่าง . ค่า dotted

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

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

ตัวอย่าง . ค่า dashed

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

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

ตัวอย่าง . ค่า ridge

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

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

ตัวอย่าง . ค่า double

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

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

ตัวอย่าง . ค่า groove

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

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

ตัวอย่าง . ค่า inset

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

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

ตัวอย่าง . ค่า outset

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

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

ตัวอย่าง

ในตัวอย่างนี้กำหนดรูปแบบเส้นขอบที่แตกต่างกัน สำหรับด้านต่าง ๆ ขององค์ประกอบ:

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

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

ตัวอย่าง

และตอนนี้สำหรับด้านต่าง ๆ ขององค์ประกอบ ยังกำหนดความหนาของเส้นขอบและสีที่แตกต่างกัน:

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

ตัวอย่าง

ตอนนี้สำหรับขอบบนและล่างกำหนด รูปแบบ solid และสำหรับขอบขวาและซ้าย - dotted:

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

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

ดูเพิ่มเติม

คุณสมบัติ border-color,
ซึ่งกำหนดสีของเส้นขอบ
คุณสมบัติ border-width,
ซึ่งกำหนดความหนาของเส้นขอบ
คุณสมบัติ border,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับเส้นขอบ