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

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

ไวยากรณ์ (Syntax)

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

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

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

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

ผลลัพธ์

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

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

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

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

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