คุณสมบัติ borderRadius ของ HTML DOM Style: สร้างมุมโค้งมน

คุณสมบัติ borderRadius ใน HTML DOM Style ใช้สำหรับกำหนดหรือดึงค่าความโค้งของมุมทั้ง 4 มุมขององค์ประกอบ สามารถควบคุมมุมแต่ละมุมได้แยกกันผ่าน borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius

ไวยากรณ์ (Syntax)

การกำหนดค่า (Setting)

object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"

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

รูปแบบการระบุค่า (Value Syntax)

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

<!DOCTYPE html>
<html>
<head>
<style>
  #DIV1 {
    height: 100px;
    width: 200px;
    border: 10px groove orange;
    padding: 10px;
    border-radius: 1px;
  }
</style>
<script>
  function changeBorderRadius() {
    document.getElementById("DIV1").style.borderRadius = "45px";
    document.getElementById("Sample").innerHTML = "รัศมีมุมของ div ทั้ง 4 มุมถูกเพิ่มเป็น 45px แล้ว";
  }
</script>
</head>
<body>
<div id="DIV1">ข้อความตัวอย่าง</div>
<p>คลิกปุ่มด้านล่างเพื่อเพิ่มขนาด border radius ของ div ด้านบน</p>
<button onclick="changeBorderRadius()">เปลี่ยน Border Radius</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

ก่อนคลิก: มุมมีความโค้งน้อย (1px)
หลังคลิก: มุมกลายเป็นวงกลมกลมเต็มที่ (45px)

เคล็ดลับและการใช้งานทั่วไป

• วงกลมสมบูรณ์: border-radius: 50% พร้อม width = height
• แคปซูล (Pill shape): border-radius: 50px (หรือค่าครึ่งหนึ่งของความสูง)
• มุมเฉพาะบางมุม: ใช้ border-top-left-radius ฯลฯ
• รูปทรงไข่ (Elliptical): border-radius: 50px / 25px

การรองรับเบราว์เซอร์

รองรับในทุกเบราว์เซอร์สมัยใหม่ (IE9+)