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

คุณสมบัติ border-color ใน CSS ใช้ระบุสีขอบขององค์ประกอบ สามารถกำหนดสีแต่ละด้านแยกได้ด้วย border-top-color, border-right-color, border-bottom-color, border-left-color

ไวยากรณ์ (Syntax)

Selector {
  border-color: /*value*/;
}

ตัวอย่างที่ 1: Border-color หลายสี

<!DOCTYPE html>
<html>
<head>
  <style>
    span {
      margin: 10px; padding: 20px;
      border-style: solid; border-color: limegreen lightblue crimson;
    }
    div {
      text-align: center; border-style: solid;
      border-color: palevioletred steelblue; height: 16px;
    }
  </style>
</head>
<body>
  <h2>Demo Heading</h2>
  <div>Demo</div>
  <p><span>This</span>is demo text just for displaying how CSS styles works.</p>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Border-bottom-color และ Border-left-style

<!DOCTYPE html>
<html>
<head>
  <style>
    li { border-bottom-color: cyan; border-bottom-style: dotted; width: 300px; }
    p { text-align: center; border-width: 8px; border-style: solid; border-color: #d11c74; border-left-style: ridge; }
  </style>
</head>
<body>
  <h2>Accessories</h2>
  <p>Displaying the car accessories</p>
  <ul>
    <li>Mud Flap</li> <li>Car Freshener</li> <li>Mobile Holder</li> <li>Bluetooth</li> <li>Wheel Lock</li>
  </ul>
</body>
</html>

ผลลัพธ์

รูปแบบค่าของ border-color (Shorthand)

border-color: red;                    /* 1 ค่า: ทุกด้าน */
border-color: red blue;               /* 2 ค่า: top/bottom, right/left */
border-color: red blue green;         /* 3 ค่า: top, right/left, bottom */
border-color: red blue green yellow;  /* 4 ค่า: top, right, bottom, left */

/* Longhands */
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

ค่าเริ่มต้นและการสืบทอด

• ค่าเริ่มต้น: currentColor (ใช้ค่าของ color property)
• ไม่สืบทอด (แต่ใช้ currentColor ซึ่งอาจสืบทอดมาจากพาเรนต์)
• ต้องมี border-style ไม่ใช่ none จะเห็นสี

Logical Properties (Modern)

/* แทนที่จะใช้ top/right/bottom/left */
border-block-start-color: red;    /* top ใน horizontal-tb */
border-block-end-color: blue;     /* bottom ใน horizontal-tb */
border-inline-start-color: green; /* left ใน ltr, right ใน rtl */
border-inline-end-color: yellow;  /* right ใน ltr, left ใน rtl */

/* Shorthand logical */
border-block-color: red blue;     /* block-start, block-end */
border-inline-color: green yellow; /* inline-start, inline-end */