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

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

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

ไวยากรณ์

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

จำนวนค่า

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

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

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

Результат:

ตัวอย่าง

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

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

css#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:

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

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

Результат:

ดูเพิ่มเติม