คุณสมบัติ borderBottomRightRadius ใช้สำหรับเพิ่มมุมโค้งมนที่ขอบขวาล่างขององค์ประกอบ หรือดึงค่าการวัดของมุมโค้งมนนั้นๆ
ไวยากรณ์ (Syntax)
รูปแบบการใช้งานมีดังนี้:
การดึงค่า borderBottomRightRadius
object.style.borderBottomRightRadius = "length|% [length|%]|initial|inherit"
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | length กำหนดรูปร่างมุมขวาล่างด้วยหน่วยความยาว (เช่น px, em, rem) |
| 2 | % กำหนดรูปร่างมุมขวาล่างเป็นเปอร์เซ็นต์ของขนาดองค์ประกอบ |
| 3 | initial ตั้งค่าเป็นค่าเริ่มต้นของเบราว์เซอร์ |
| 4 | inherit สืบทอดค่าจากองค์ประกอบพาเรนต์ |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปลี่ยนแปลงมุมขวาล่างของกล่อง div ผ่าน JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-right-radius: 240px 90px;
}
</style>
<script>
function changeBottomBorder() {
document.getElementById("DIV1").style.borderBottomRightRadius = "90px 50px";
document.getElementById("Sample").innerHTML = "มุมขอบขวาล่างถูกลดขนาดลงแล้ว";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนขนาดมุมขวาล่างของกล่องข้างบน</p>
<button onclick="changeBottomBorder()">เปลี่ยนขอบขวาล่าง</button>
<p id="Sample"></p>
</body>
</html>
ผลลัพธ์
ก่อนคลิกปุ่ม: กล่องจะมีมุมขวาล่างโค้งมนขนาดใหญ่ (240px 90px)
หลังคลิกปุ่ม "เปลี่ยนขอบขวาล่าง": มุมขวาล่างจะเปลี่ยนเป็น 90px 50px
หมายเหตุ: คุณสามารถระบุค่าได้ 1 หรือ 2 ค่า — ค่าเดียวจะใช้กับทั้งรัศมีแนวนอนและแนวตั้ง สองค่าจะเป็นรัศมีแนวนอนก่อน แล้วตามด้วยแนวตั้ง
