ใช้ Property borderBottomLeftRadius เพื่อตั้งค่า Border Radius มุมซ้ายล่าง ของ Element
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<button onclick="display()">Set bottom-left border corner</button>
<div id="box">
<p>Demo Text</p>
<p>Demo Text</p>
</div>
<script>
function display() {
document.getElementById("box").style.borderBottomLeftRadius = "30px";
}
</script>
</body>
</html>
คำอธิบาย
borderBottomLeftRadius— ความโค้งมุมซ้ายล่าง (Horizontal/Vertical Radius)- รับค่า:
length(px, em, rem, %), หรือ 2 ค่า"horizontal vertical" - ตัวอย่าง:
"30px"= วงกลม 30px,"50% 25%"= Ellipse
Border Radius Properties ทั้ง 4 มุม
| Property | มุม | Shorthand |
|---|---|---|
borderTopLeftRadius | ซ้ายบน | border-radius: TL TR BR BL |
borderTopRightRadius | ขวาบน | |
borderBottomRightRadius | ขวาล่าง | |
borderBottomLeftRadius | ซ้ายล่าง |
Shorthand Syntax
/* 1 ค่า: ทุกมุม */ border-radius: 10px; /* 2 ค่า: TL/BR, TR/BL */ border-radius: 10px 20px; /* 3 ค่า: TL, TR/BL, BR */ border-radius: 10px 20px 30px; /* 4 ค่า: TL, TR, BR, BL (Clockwise) */ border-radius: 10px 20px 30px 40px; /* Elliptical: Horizontal / Vertical */ border-radius: 50% / 25%; border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
แก้ไขข้อมูลต้นฉบับ: ระบุว่า "bottom-right corner" ในคำอธิบาย — ผิด ต้องเป็น "bottom-left corner" ตาม Property Name
