ใช้คุณสมบัติ border-top-left-radius เพื่อกำหนดรัศมีของมุมโค้งที่มุมบนซ้ายของ element สามารถทดลองรันโค้ดตัวอย่างด้านล่างได้
ตัวอย่างโค้ด
<html> <head> <style> #rcorner { border-radius: 25px; border-top-left-radius: 45px; background: #FADBD8; padding: 20px; width: 300px; height: 150px; } </style> </head> <body> <p id = "rcorner">Rounded top-left corner!</p> </body> </html>
คำอธิบาย
ตัวอย่างนี้ตั้ง border-radius: 25px ให้ทุกมุม แล้ว override มุมบนซ้ายด้วย border-top-left-radius: 45px ทำให้มุมบนซ้ายโค้งมากกว่ามุมอื่นๆ
คุณสมบัติมุมโค้งแต่ละมุม:
border-top-left-radius- มุมบนซ้ายborder-top-right-radius- มุมบนขวาborder-bottom-right-radius- มุมล่างขวาborder-bottom-left-radius- มุมล่างซ้าย
รูปแบบค่า:
- ค่าเดียว:
border-top-left-radius: 20px- วงกลมสมบูรณ์ - สองค่า:
border-top-left-radius: 20px 40px- รัศมีแนวนอน 20px, แนวตั้ง 40px (รูปวงรี) - รองรับหน่วย: px, em, rem, %, ฯลฯ
