บทนำ
Property borderTopLeftRadius ใช้กำหนดรัศมีของมุมโค้งมุมบนซ้ายของ element ทำให้มุมนั้นมนขึ้น
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="display()">เปลี่ยนรัศมีมุมบนซ้าย</button>
<script>
function display() {
document.getElementById("box").style.borderTopLeftRadius = "20px";
}
</script>
</body>
</html>
รูปแบบค่า
| รูปแบบ | คำอธิบาย | ตัวอย่าง |
|---|---|---|
| <length> | รัศมีเดียว (วงกลม) | 20px, 50% |
| <length> <length> | รัศมีแนวนอน แนวตั้ง (ไข่) | 30px 10px |
Properties มุมทั้ง 4
// มุมบนซ้าย element.style.borderTopLeftRadius = "20px"; // มุมบนขวา element.style.borderTopRightRadius = "20px"; // มุมล่างซ้าย element.style.borderBottomLeftRadius = "20px"; // มุมล่างขวา element.style.borderBottomRightRadius = "20px";
Shorthand borderRadius
// 4 มุมเท่ากัน element.style.borderRadius = "20px"; // คู่: บนซ้าย/ล่างขวา | บนขวา/ล่างซ้าย element.style.borderRadius = "20px 0"; // ทั้ง 4 มุมต่างกัน (ตามเข็มนาฬิกา: บนซ้าย บนขวา ล่างขวา ล่างซ้าย) element.style.borderRadius = "20px 10px 5px 0";
การประยุกต์ใช้
- สร้างปุ่มมุมมน一边
- สร้างการ์ด (card) มุมบนมน มุมล่างฉาก
- สร้างรูปทรงพิเศษ เช่น แท็บ (tab), สเปเชอร์ (speech bubble)
ตัวอย่าง Speech Bubble
.speech-bubble {
border-radius: 20px 20px 20px 0;
background: #007bff;
color: white;
padding: 1rem;
position: relative;
}
