คุณสมบัติ borderStyle เป็น shorthand สำหรับกำหนดรูปแบบขอบทั้ง 4 ด้าน พร้อมกัน รับค่า 1-4 ค่า
ไวยากรณ์ (Syntax)
object.style.borderStyle = "value"การรับค่า 1-4 ค่า (Clockwise từ Top)
| จำนวนค่า | การกระจาย |
|---|---|
| 1 ค่า | ทุกด้านเท่ากัน |
| 2 ค่า | บน/ล่าง = ค่าแรก, ซ้าย/ขวา = ค่าที่สอง |
| 3 ค่า | บน = ค่าแรก, ซ้าย/ขวา = ค่าที่สอง, ล่าง = ค่าที่สาม |
| 4 ค่า | บน, ขวา, ล่าง, ซ้าย (ตามเข็มนาฬิกา) |
ค่ารูปแบบขอบที่รองรับ
| ค่า | คำอธิบาย |
|---|---|
| none | ไม่มีขอบ (ค่าเริ่มต้น) |
| hidden | เหมือน none แต่จองพื้นที่ (โปร่งใส) |
| dotted | ขอบแบบจุด |
| dashed | ขอบแบบเส้นขีด |
| solid | ขอบแบบเส้นทึบ |
| double | ขอบแบบคู่ |
| groove | ขอบ 3D ร่อง |
| ridge | ขอบ 3D ฉุ้ม |
| inset | ขอบ 3D ฝังเข้า |
| outset | ขอบ 3D โผล่ขึ้น |
| initial | ค่าเริ่มต้น |
| inherit | สืบทอดจากพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
width: 300px;
height: 100px;
border: 8px solid dodgerblue;
border-style: groove;
}
</style>
<script>
function changeBorderStyle() {
document.getElementById("DIV1").style.borderStyle = "dashed";
document.getElementById("Sample").innerHTML = "รูปแบบขอบถูกเปลี่ยนเป็น dashed แล้ว";
}
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนรูปแบบขอบของ div ด้านบน</p>
<button onclick="changeBorderStyle()">เปลี่ยนรูปแบบขอบ</button>
<p id="Sample"></p>
</body>
</html>ผลลัพธ์
ก่อน: ขอบแบบ groove (3D ร่อง)
หลัง: ขอบแบบ dashed (เส้นขีด) ทุกด้าน
ตัวอย่างการใช้หลายค่า
/* 1 ค่า - ทุกด้าน */
border-style: solid;
/* 2 ค่า - บน/ล่าง | ซ้าย/ขวา */
border-style: solid dashed;
/* 3 ค่า - บน | ซ้าย/ขวา | ล่าง */
border-style: solid dashed dotted;
/* 4 ค่า - บน | ขวา | ล่าง | ซ้าย */
border-style: solid dashed dotted double;คุณสมบัติ Longhand ที่เกี่ยวข้อง
borderTopStyle,borderRightStyle,borderBottomStyle,borderLeftStyle
หมายเหตุ
- ต้องมี
border-width> 0 และborder-colorที่มองเห็นได้ - groove/ridge/inset/outset ต้องการสีที่มีความลึกเพื่อเอฟเฟกต์ 3D
- hidden ใช้กับ table (border-collapse: collapse)
