คุณสมบัติ borderWidth เป็น shorthand สำหรับกำหนดความกว้างขอบทั้ง 4 ด้าน พร้อมกัน รับค่า 1-4 ค่า
ไวยากรณ์ (Syntax)
object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
การรับค่า 1-4 ค่า (Clockwise from Top)
| จำนวนค่า | การกระจาย |
|---|
| 1 ค่า | ทุกด้านเท่ากัน |
| 2 ค่า | บน/ล่าง = ค่าแรก, ซ้าย/ขวา = ค่าที่สอง |
| 3 ค่า | บน = ค่าแรก, ซ้าย/ขวา = ค่าที่สอง, ล่าง = ค่าที่สาม |
| 4 ค่า | บน, ขวา, ล่าง, ซ้าย (ตามเข็มนาฬิกา) |
ค่าที่รองรับ
| ค่า | คำอธิบาย |
|---|
| thin | ขอบบาง (~1px) |
| medium | ขอบกลาง (ค่าเริ่มต้น ~3px) |
| thick | ขอบหนา (~5px) |
| length | ระบุความกว้างด้วยหน่วย (px, em, rem) แนะนำ |
| initial | ตั้งค่ากลับเป็นค่าเริ่มต้น |
| inherit | สืบทอดจากพาเรนต์ |
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-width: 30px;
}
</style>
<script>
function changeBorderWidth() {
document.getElementById("DIV1").style.borderWidth = "5px";
document.getElementById("Sample").innerHTML = "ความกว้างขอบถูกลดลงเป็น 5px แล้ว";
}
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนความกว้างขอบของ div ด้านบน</p>
<button onclick="changeBorderWidth()">เปลี่ยนความกว้างขอบ</button>
<p id="Sample"></p>
</body>
</html>
ผลลัพธ์
ก่อน: ขอบทั้ง 4 ด้านหนา 30px
หลัง: ขอบทั้ง 4 ด้านบาง 5px
ตัวอย่างการใช้หลายค่า
/* 1 ค่า - ทุกด้าน */
border-width: 2px;
/* 2 ค่า - บน/ล่าง | ซ้าย/ขวา */
border-width: 2px 5px;
/* 3 ค่า - บน | ซ้าย/ขวา | ล่าง */
border-width: 2px 5px 1px;
/* 4 ค่า - บน | ขวา | ล่าง | ซ้าย */
border-width: 2px 5px 1px 3px;
คุณสมบัติ Longhand ที่เกี่ยวข้อง
borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
คุณสมบัติ Shorthand อื่นๆ ของขอบ
| Shorthand | ครอบคลุม |
|---|
| borderWidth | ความกว้าง 4 ด้าน |
| borderStyle | รูปแบบ 4 ด้าน |
| borderColor | สี 4 ด้าน |
| borderTop | บน: width, style, color |
| borderRight | ขวา: width, style, color |
| borderBottom | ล่าง: width, style, color |
| borderLeft | ซ้าย: width, style, color |
| border | ทั้ง 4 ด้าน: width, style, color |
หมายเหตุ
- ต้องมี
border-style ไม่ใช่ none ถึงจะเห็นขอบ
- หลีกเลี่ยง thin/medium/thick ใช้ px/em/rem แทน
- borderWidth ไม่รวม outline (ใช้ outline-width แทน)
