มุมโค้งมนใน CSS3
CSS3 นำเสนอคุณสมบัติ border-radius สำหรับสร้างมุมโค้งมนขององค์ประกอบ ไม่ต้องใช้ภาพประกอบแล้ว
ไวยากรณ์พื้นฐาน
#rcorners {
border-radius: 60px / 15px; /* แนวนอน / แนวตั้ง */
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}คุณสมบัติย่อยสำหรับแต่ละมุม
| คุณสมบัติ | มุมที่ควบคุม |
|---|---|
border-radius | ทั้ง 4 มุม (shorthand) |
border-top-left-radius | มุมซ้ายบน |
border-top-right-radius | มุมขวาบน |
border-bottom-right-radius | มุมขวาล่าง |
border-bottom-left-radius | มุมซ้ายล่าง |
รูปแบบการกำหนดค่า
/* 1 ค่า: ทุกมุมเท่ากัน */
border-radius: 10px;
/* 2 ค่า: ซ้ายบน+ขวาล่าง | ขวาบน+ซ้ายล่าง */
border-radius: 10px 20px;
/* 3 ค่า: ซ้ายบน | ขวาบน+ซ้ายล่าง | ขวาล่าง */
border-radius: 10px 20px 30px;
/* 4 ค่า: ซ้ายบน | ขวาบน | ขวาล่าง | ซ้ายล่าง (ตามเข็มนาฬิกา) */
border-radius: 10px 20px 30px 40px;
/* ทแยกแนวนอน/แนวตั้ง (elliptical corners) */
border-radius: 50px / 15px;
border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;ตัวอย่างการใช้งานทั่วไป
.btn { border-radius: 4px; } /* ปุ่มมุมมนเล็ก */
.card { border-radius: 12px; } /* การ์ดมุมมนกลาง */
.circle { border-radius: 50%; } /* วงกลมสมบูรณ์ */
.pill { border-radius: 9999px; } /* แคปซูล (full rounded) */
.avatar { border-radius: 50%; overflow: hidden; }การรองรับเบราว์เซอร์
รองรับทุกเบราว์เซอร์สมัยใหม่ ไม่ต้องใช้ prefix (-webkit-, -moz-) แล้ว
