คุณสมบัติ borderTopWidth ของ HTML DOM Style: ความกว้างขอบบน

คุณสมบัติ borderTopWidth ใช้สำหรับกำหนดหรือดึงค่าความกว้างของขอบด้านบนขององค์ประกอบ

ไวยากรณ์ (Syntax)

object.style.borderTopWidth = "thin|medium|thick|length|initial|inherit"

ค่าที่รองรับ

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    height: 100px;
    width: 200px;
    border: 10px groove orange;
    padding: 10px;
    border-top-width: 30px;
  }
</style>
<script>
  function changeTopWidth() {
    document.getElementById("DIV1").style.borderTopWidth = "1px";
    document.getElementById("Sample").innerHTML = "ความกว้างขอบบนถูกลดลงเหลือ 1px แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนความกว้างขอบบนของ div ด้านบน</p>
<button onclick="changeTopWidth()">เปลี่ยนความกว้างขอบบน</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ขอบบนหนา 30px
หลัง: ขอบบนบางเหลือ 1px

คุณสมบัติขอบด้านอื่นที่เกี่ยวข้อง

• borderRightWidth, borderBottomWidth, borderLeftWidth
• borderWidth - Shorthand สำหรับทั้ง 4 ด้าน

แนวทางปฏิบัติที่ดี

• ใช้หน่วย px เพื่อความแม่นยำ
• หลีกเลี่ยง thin/medium/thick (ขนาดไม่คงที่ข้ามเบราว์เซอร์)
• ต้องมี border-top-style ไม่ใช่ none