About CSS Border Radius Generator
The CSS Border Radius Generator is a visual tool that helps you create custom rounded corners for your web elements. Control each corner individually or lock them together for uniform rounding. Perfect for creating buttons, cards, images, and unique shapes.
Border Radius Syntax
Single Value:
border-radius: 8px; /* All corners */Four Values:
border-radius: 10px 20px 30px 40px; /* TL TR BR BL */Individual Corners:
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;Units Explained
Pixels (px):
Fixed size that doesn't scale. Best for consistent, predictable rounding.
Percentage (%):
Relative to element size. 50% creates perfect circles/pills. Scales with element.
REM:
Relative to root font size. Scales with user's font preferences.
Common Use Cases
- Buttons: Subtle rounding (4-8px) for modern look
- Cards: Medium rounding (8-16px) for depth
- Avatars: 50% for perfect circles
- Pills: Large values (999px) for pill shapes
- Images: Rounded corners for visual interest
- Badges: High rounding for tag-like appearance
Shape Presets
Rounded:
Standard rounded corners (12px) for modern UI elements.
Circle:
Perfect circle (50%) - works on square elements.
Pill:
Fully rounded ends (999px) for button and badge shapes.
Blob:
Organic shape with alternating corner values.
Leaf:
Asymmetric shape with two rounded corners.
Best Practices
- Use consistent border radius across similar elements
- Subtle rounding (4-8px) for professional look
- 50% creates perfect circles on square elements
- Large values (999px) for pill-shaped buttons
- Match border radius to your design system
- Consider element size when choosing radius
- Test on different screen sizes
Advanced Techniques
Elliptical Corners:
border-radius: 50px / 25px; /* Horizontal / Vertical */Clipping Content:
Border radius clips child elements. Use overflow: hidden if needed.
Browser Support
Border-radius is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes needed.