Property Order

The border-radius property applies in clockwise order: top-left → top-right → bottom-right → bottom-left

Shorthand Properties

• • border-radius: 10px; - Applies to all four corners
• • border-radius: 10px 20px; - First applies to top-left and bottom-right, second to top-right and bottom-left
• • border-radius: 10px 20px 30px; - First applies to top-left, second to top-right and bottom-left, third to bottom-right
• • border-radius: 10px 20px 30px 40px; - Applies to top-left, top-right, bottom-right, and bottom-left in order

Usage Tips

• • Use 50% to create a perfect circle
• • 4-8px is typically good for buttons
• • 8-16px is common for cards and panels
• • Asymmetric radius can create unique design effects