ผลของคุณสมบัติ Color ต่อ Borders และ Outlines ใน CSS

เราสามารถกำหนดสีขอบ (border-color) และสีขอบนอก (outline-color) ได้ ต่างจาก border outline ไม่ใช้พื้นที่

ไวยากรณ์ (Syntax)

/* กำหนดสีขอบ */
Selector { border-color: /*value*/; }

/* กำหนดสีขอบนอก */
Selector { outline-color: /*value*/; }

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

<!DOCTYPE html>
<html>
<head>
  <style>
    span {
      margin: 15px; padding: 20px;
      border-style: solid; border-color: limegreen crimson;
      position: absolute;
      outline-width: 5px; outline-style: ridge; outline-color: orange;
      top: 15px; border-radius: 50%;
    }
    div {
      margin: auto; border-style: solid; border-color: darkmagenta dodgerblue;
      outline-style: dotted; outline-color: black;
      height: 80px; width: 80px;
    }
  </style>
</head>
<body>
  <div><span></span></div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Border Ridge + Outline Solid

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      border-width: 5px; border-style: ridge; border-color: lightblue;
      outline-style: solid; outline-color: darkviolet;
    }
  </style>
</head>
<body>
  <h2>Exams Timings</h2>
  <p>Entrance Exam timings 3PM - 5PM. All candidates are requested to report at 2:45PM.</p>
</body>
</html>

ผลลัพธ์

Border-color Longhands

border-color: red green blue yellow;      /* top right bottom left */
border-color: red green blue;             /* top right/left bottom */
border-color: red green;                  /* top/bottom right/left */
border-color: red;                        /* ทุกด้าน */

/* หรือใช้แยกด้าน */
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;

Outline-color

• ไม่มี longhands สำหรับแต่ละด้าน (outline วาดรอบทั้ง 4 ด้านเสมอ)
• ต้องมี outline-style ไม่ใช่ none จึงจะเห็นสี
• ค่าเริ่มต้น: currentColor (สืบทอดจาก color)

ผลของคุณสมบัติ color ต่อ Border/Outline

หากไม่ระบุ border-color หรือ outline-color โดยตรง จะใช้ค่า currentColor (ค่าของ color ขององค์ประกอบนั้น) เป็นค่าเริ่มต้น

.box {
  color: red;
  border: 2px solid;        /* border-color = red */
  outline: 2px solid;       /* outline-color = red */
}