วิธีตั้งค่ารูปร่างขอบมุมล่างขวา (Bottom-Right Border Radius) ด้วย JavaScript

บทนำ

Property borderBottomRightRadius ใช้สำหรับกำหนดรัศมีของมุมโค้งมุมล่างขวาของ element ทำให้มุมนั้นกลายเป็นมน ไม่ใช่มุมฉาก

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: 2px dashed blue;
      width: 120px;
      height: 120px;
    }
  </style>
</head>
<body>
  <button onclick="display()">ตั้งค่ามุมล่างขวา</button>
  <div id="box">
    <p>Demo Text</p>
    <p>Demo Text</p>
  </div>
  <script>
    function display() {
      document.getElementById("box").style.borderBottomRightRadius = "30px";
    }
  </script>
</body>
</html>

รูปแบบค่า

Properties มุมอื่นๆ

• borderTopLeftRadius - มุมบนซ้าย
• borderTopRightRadius - มุมบนขวา
• borderBottomLeftRadius - มุมล่างซ้าย
• borderBottomRightRadius - มุมล่างขวา

Shorthand: borderRadius

// ทั้ง 4 มุมเท่ากัน
element.style.borderRadius = "10px";

// บนซ้าย/ล่างขวา | บนขวา/ล่างซ้าย
element.style.borderRadius = "10px 20px";

// บนซ้าย | บนขวา | ล่างขวา | ล่างซ้าย
element.style.borderRadius = "10px 20px 30px 40px";

// แบบ ellipse (แนวนอน / แนวตั้ง)
element.style.borderRadius = "10px 20px 30px 40px / 5px 10px 15px 20px";

ตัวอย่าง ellipse

// มุมล่างขวาเป็นรูปไข่ กว้าง 30px สูง 10px
element.style.borderBottomRightRadius = "30px 10px";