ลำดับคุณสมบัติ

คุณสมบัติ border-radius ใช้ตามลำดับตามเข็มนาฬิกา: บนซ้าย → บนขวา → ล่างขวา → ล่างซ้าย

คุณสมบัติย่อ

• • border-radius: 10px; - ใช้กับทั้งสี่มุม
• • border-radius: 10px 20px; - อันแรกใช้กับบนซ้ายและล่างขวา, อันที่สองใช้กับบนขวาและล่างซ้าย
• • border-radius: 10px 20px 30px; - อันแรกใช้กับบนซ้าย, อันที่สองใช้กับบนขวาและล่างซ้าย, อันที่สามใช้กับล่างขวา
• • border-radius: 10px 20px 30px 40px; - ใช้กับบนซ้าย, บนขวา, ล่างขวา, และล่างซ้ายตามลำดับ

เคล็ดลับการใช้งาน

• • ใช้ 50% เพื่อสร้างวงกลมที่สมบูรณ์แบบ
• • 4-8px มักจะดีสำหรับปุ่ม
• • 8-16px เป็นเรื่องปกติสำหรับบัตรและแผงควบคุม
• • รัศมีที่ไม่สมมาตรสามารถสร้างเอฟเฟกต์การออกแบบที่ไม่เหมือนใคร