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

ใช้ Property style.borderTopRightRadius ของ Element เพื่อตั้งค่าความโค้งของมุมขวาบน (Top-Right Corner) แยกจากมุมอื่นๆ ได้

Syntax

element.style.borderTopRightRadius = "length | percentage | initial | inherit";

ค่า: Length (px, em, rem, %), Percentage (ของ Width/Height ของ Element), Two Values (Horizontal Radius, Vertical Radius) สำหรับ Ellipse

ตัวอย่างครบ: กดปุ่มเปลี่ยนมุมขวาบน

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      border: thick solid gray;
      width: 300px;
      height: 200px;
      margin: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <div id="box">Demo Text - มุมขวาบนโค้ง</div>
  <br><br>
  <button type="button" onclick="changeRadius()">เปลี่ยนมุมขวาบนเป็น 20px</button>
  <button type="button" onclick="resetRadius()">รีเซ็ต</button>

  <script>
    function changeRadius() {
      document.getElementById("box").style.borderTopRightRadius = "20px";
    }
    function resetRadius() {
      document.getElementById("box").style.borderTopRightRadius = "0";
    }
  </script>
</body>
</html>

Properties มุมขอบทั้ง 4 มุม

Shorthand border-radius (CSS) - เขียนใน JS ได้ผ่าน style.borderRadius

// 1 ค่า: ทุกมุม
element.style.borderRadius = "10px";

// 2 ค่า: Top-Left/Bottom-Right, Top-Right/Bottom-Left
element.style.borderRadius = "10px 20px";

// 3 ค่า: Top-Left, Top-Right/Bottom-Left, Bottom-Right
element.style.borderRadius = "10px 20px 30px";

// 4 ค่า: Top-Left, Top-Right, Bottom-Right, Bottom-Left (Clockwise)
element.style.borderRadius = "10px 20px 30px 40px";

// Elliptical (Horizontal / Vertical) - ใช้ /
element.style.borderRadius = "50px / 20px"; // ทุกมุม
element.style.borderRadius = "10px 20px 30px 40px / 5px 10px 15px 20px";

การอ่านค่าปัจจุบัน (Get Computed Style)

const box = document.getElementById("box");
const computed = window.getComputedStyle(box);
console.log(computed.borderTopRightRadius); // "20px" (เสมอเป็น Pixel)

การใช้งานจริง (Use Cases)

• Card/UI Component: โค้งมุมบนสองข้าง (borderTopLeftRadius, borderTopRightRadius) ทำ Header แยกจาก Body
• Progress Bar: โค้งมุมขวาเมื่อ Progress ไม่เต็ม, โค้งมุมซ้ายเมื่อเริ่มต้น
• Tooltip/Callout: โค้งมุมด้านที่ชี้ไป Element
• Animation: Transition borderTopRightRadius สำหรับ Effect เปิด/ปิด Panel

// CSS Transition
#box {
  transition: border-top-right-radius 0.3s ease;
}

สรุป

element.style.borderTopRightRadius = "20px" ตั้งค่ามุมขวาบน | Properties ทุกมุม: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius | Shorthand: borderRadius (1-4 ค่า, รองรับ Ellipse ด้วย /) | ใช้ CSS Class + Transition แทน Inline Style ใน Production