การตั้งค่ามุมมองขวาบนด้วย CSS border-top-right-radius

คุณสมบัติ border-top-right-radius ใช้กำหนดรัศมีของมุมขวาบน (top-right corner) ของ element แยกต่างหากจากมุมอื่นๆ

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

<html>
<head>
  <style>
    #rcorner {
      border-radius: 25px;           /* มุมทั้ง 4 ด้าน 25px */
      border-top-right-radius: 45px; /* มุมขวาบน 45px (ทับซ้อนค่าก่อนหน้า) */
      background: orange;
      padding: 20px;
      width: 400px;
      height: 250px;
    }
  </style>
</head>
<body>
  <p id="rcorner">Rounded border-top-right corner!</p>
</body>
</html>

คำอธิบาย: border-radius: 25px กำหนดมุมทั้ง 4 ด้านเป็น 25px แล้ว border-top-right-radius: 45px มาเปลี่ยนเฉพาะมุมขวาบนเป็น 45px

รูปแบบไวยากรณ์เต็ม:

border-top-right-radius: <length> | <percentage> [ <length> | <percentage> ]?

สามารถระบุค่า 2 ค่าได้: ค่าแรก = รัศมีแนวนอน, ค่าที่สอง = รัศมีแนวตั้ง (สร้างรูปไข่)

คุณสมบัติที่เกี่ยวข้อง: border-top-left-radius, border-bottom-right-radius, border-bottom-left-radius และ shorthand border-radius