คุณสมบัติ outline-width ใน CSS

คุณสมบัติ outline-width ใช้กำหนดความหนาของเส้นขอบนอก (outline) รอบขอบขององค์ประกอบ แต่ outline ไม่ใช่ส่วนหนึ่งของขนาดองค์ประกอบ ไม่ส่งผลต่อ layout ต่างจาก border

ไวยากรณ์ (Syntax)

Selector {
  outline-width: /*value*/;
}

หมายเหตุ: ต้องกำหนด outline-style ก่อนจึงจะเห็น outline-width ทำงาน

ตัวอย่างที่ 1: Outline รอบวงกลม

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

ผลลัพธ์

ตัวอย่างที่ 2: Outline บนพารากราฟ

<!DOCTYPE html>
<html>
<head>
  <title>CSS outline-width</title>
  <style>
    #container { width: 50%; margin: 50px auto; }
    p {
      margin: auto; border-style: ridge; border-width: 15px; border-color: lightblue;
      outline-style: solid; outline-color: darkviolet;
    }
  </style>
</head>
<body>
  <div id="container">
    <p>Learning is fun with examples and live running code.</p>
  </div>
</body>
</html>

ผลลัพธ์

ค่าที่ใช้ได้สำหรับ outline-width

• thin, medium, thick - ความหนามาตรฐาน
• <length> - ความหนาเฉพาะเจาะจง เช่น 2px, 0.5em

ความแตกต่าง Outline vs Border