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

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

ไวยากรณ์ (Syntax)

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

ตัวอย่างที่ 1: Border-style หลายรูปแบบ

<!DOCTYPE html>
<html>
<head>
  <style>
    div:first-of-type { margin: 5% 0 0 20%; }
    div { height: 40px; width: 40px; margin: auto; padding: 10px; border-style: solid; display: flex; float: left; }
    #d1 { border-style: double dashed; }
    #d2 { border-style: dotted; }
  </style>
</head>
<body>
  <div></div> <div id="d1"></div> <div id="d2"></div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: Ridge และ Double พร้อม Radius

<!DOCTYPE html>
<html>
<head>
  <style>
    div { margin: 20px; float: left; height: 80px; width: 60px; border-style: ridge; border-width: 1.2em; border-color: midnightblue; border-bottom-left-radius: 50%; }
    div + div { height: 120px; width: 80px; border-style: double; border-color: seagreen; border-right-width: 180px; border-bottom-right-radius: 100%; }
  </style>
</head>
<body>
  <div></div> <div></div>
</body>
</html>

ผลลัพธ์

ค่าของ border-style

รูปแบบ Shorthand (1-4 ค่า)

border-style: solid;              /* ทุกด้าน */
border-style: solid dashed;       /* top/bottom, right/left */
border-style: solid dashed dotted; /* top, right/left, bottom */
border-style: solid dashed dotted double; /* top, right, bottom, left */

Logical Properties (Modern)

border-block-style: solid dashed;   /* block-start, block-end */
border-inline-style: dotted double; /* inline-start, inline-end */

เคล็ดลับ

• border-style: none หรือ hidden ทำให้ border-width กลายเป็น 0
• 3D styles (groove, ridge, inset, outset) ต้องการ border-width ค่อนข้างหนา (≥2px) จึงเห็นชัด
• double ต้องการ width ≥ 3px (1px line + 1px gap + 1px line)