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

คุณสมบัติ border-color กำหนดสี ของเส้นขอบให้กับทุกด้านพร้อมกันหรือ แยกกันสำหรับแต่ละด้าน ค่าของคุณสมบัติ เป็น หน่วยใด ๆ สำหรับสี ได้ ค่าเริ่มต้น: เป็น สีเดียวกันกับข้อความของบล็อก

คุณสมบัตินี้เป็นคุณสมบัติแบบย่อสำหรับ คุณสมบัติต่อไปนี้: border-left-color, border-right-color, border-top-color, border-bottom-color

ไวยากรณ์

ตัวเลือก {
	border-color: สี;
}

จำนวนค่า

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

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

ตัวอย่าง

มาเปลี่ยนสีเส้นขอบของบล็อกเป็นสีแดง:

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

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

ตัวอย่าง

กำหนดเส้นขอบสีแดงสำหรับด้านบนและด้านล่าง และสีฟ้าสำหรับด้านขวาและด้านซ้าย:

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

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

ตัวอย่าง

กำหนดเส้นขอบสีแดงสำหรับด้านบน, สีฟ้าสำหรับด้านขวา, สีเขียวสำหรับด้านล่าง, สีดำ สำหรับด้านซ้าย:

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

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green 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;
}

ตัวอย่าง

หากสีของเส้นขอบไม่ได้กำหนดไว้ใน border-color - มันจะถูกนำมาจากคุณสมบัติ color:

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

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

ดูเพิ่มเติม

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