คุณสมบัติ borderBottomLeftRadius ใช้สำหรับเพิ่มมุมโค้งมนที่ขอบซ้ายล่างขององค์ประกอบ สามารถตั้งค่าและดึงค่ารูปร่างมุมที่มุมซ้ายล่างได้
ไวยากรณ์ (Syntax)
รูปแบบการตั้งค่า borderBottomLeftRadius:
object.style.borderBottomLeftRadius = "length|% [length|%]|initial|inherit"
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | length กำหนดรูปร่างมุมซ้ายล่างด้วยหน่วยความยาว |
| 2 | % กำหนดรูปร่างมุมซ้ายล่างเป็นเปอร์เซ็นต์ |
| 3 | initial ตั้งค่าเป็นค่าเริ่มต้น |
| 4 | inherit สืบทอดค่าจากองค์ประกอบพาเรนต์ |
ตัวอย่างการใช้งาน
ตัวอย่างการเปลี่ยนแปลงมุมซ้ายล่างของกล่อง div:
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-left-radius: 240px 90px;
}
</style>
<script>
function changeBottomBorder() {
document.getElementById("DIV1").style.borderBottomLeftRadius = "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
หมายเหตุ: คล้ายกับ borderBottomRightRadius สามารถระบุ 1-2 ค่าได้ เพื่อควบคุมรัศมีแนวนอนและแนวตั้งแยกกัน
