Size Variations
The rounded utilities provide five size variations, from small to extra large:
Special Shapes
Create perfect circles, pills, and remove rounding entirely:
Per-Corner Customization
Use CSS custom properties to control individual corners:
Corners
Only
Only
Corners
Custom Size
Use CSS custom property --rounded-size to change radius size:
Custom Units
Adjust the base unit to make rounding depend on different units:
Unit
Unit
Unit
Unit
Common Use Cases
Practical examples of rounded corners in UI components:
Card Component
Perfect for content cards with subtle rounding
Feature Box
Larger rounding for emphasis and modern feel
Input Field
Small rounding for form elements
Button Variations
Different button styles using rounded utilities:
Avatar & Image Examples
Perfect circles and rounded containers for images:
Theme Integration
Rounded corners work beautifully with different color schemes:
Dark Theme
Elegant with subtle shadows
Light Theme
Clean with soft shadows
Accent Theme
Bold and vibrant
Warm Theme
Friendly and approachable