คุณสมบัติ borderRightStyle ของ HTML DOM Style: รูปแบบขอบขวา

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

ไวยากรณ์ (Syntax)

object.style.borderRightStyle = value

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

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

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    width: 300px;
    height: 100px;
    border-right: 8px solid dodgerblue;
    border-right-style: groove;
  }
</style>
<script>
  function changeRightStyle() {
    document.getElementById("DIV1").style.borderRightStyle = "dashed";
    document.getElementById("Sample").innerHTML = "รูปแบบขอบขวาถูกเปลี่ยนเป็น dashed แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มเพื่อเปลี่ยนรูปแบบขอบขวาของ div ด้านบน</p>
<button onclick="changeRightStyle()">เปลี่ยนรูปแบบขอบขวา</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อน: ขอบขวาแบบ groove (3D ร่อง)
หลัง: ขอบขวาแบบ dashed (เส้นขีด)

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

• borderLeftStyle, borderTopStyle, borderBottomStyle
• borderStyle - Shorthand สำหรับทั้ง 4 ด้าน

หมายเหตุ

• ต้องมี border-right-width > 0 และ border-right-color ที่มองเห็นได้
• groove/ridge/inset/outset ต้องการสีที่มีคอนทราสต์เพื่อเห็น 3D