CSS Border Radius Generator
Presets
CSS Code
border-radius: 8px;Full syntax:
.element {
border-radius: 8px;
}Individual properties:
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;Live Preview
8px
Example Uses
Button
Card
Card Title
A card with custom border radius.
Image Container
Avatar
Common Values
None
0Slight
2-4pxRounded
8pxLarge
12-16pxXL
20-24pxPill / Circle
50% or 999pxAbout CSS Border Radius
CSS border-radius creates rounded corners on HTML elements. It's one of the most commonly used CSS properties for modern, polished designs. Control all four corners individually or use a uniform radius for consistency.
Syntax Formats:
/* One value - all corners */
border-radius: 8px;
/* Four values - top-left, top-right, bottom-right, bottom-left */
border-radius: 10px 20px 30px 40px;
/* Percentage values for responsive shapes */
border-radius: 50%; /* Creates perfect circle on square */
Common Use Cases:
- Buttons and call-to-action elements
- Cards and content containers
- Images and avatars (circles and rounded squares)
- Form inputs and text fields
- Navigation pills and tabs
- Badges and labels
Design Tips:
- Use consistent border radius values throughout your design system
- Smaller elements (buttons, badges) typically use smaller radius (4-8px)
- Larger containers (cards, modals) can use larger radius (12-24px)
- 50% creates perfect circles (on square elements)
- Organic/blob shapes use different values per corner
- Consider mobile touch targets when rounding buttons
Browser Support:
Border-radius is supported in all modern browsers. For older browsers (IE8 and below), the corners will simply remain square - a harmless graceful degradation.
Advanced: Elliptical Corners:
You can create elliptical corners using two values per corner:
border-radius: 50px / 30px; /* horizontal / vertical radius */
How It Works
Border radius generators create CSS code for rounded corners using the border-radius property. The property accepts 1-4 values for controlling all corners simultaneously or individually. Single value (border-radius: 10px) rounds all corners equally. Four values control each corner: top-left, top-right, bottom-right, bottom-left. Eight values (using slash notation) control horizontal and vertical radii separately for elliptical corners (border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px). Values can be in pixels, percentages, or ems. Percentage-based radii (50%) create perfect circles from squares or ellipses from rectangles. The generator provides visual controls (sliders, inputs) for each corner, live preview, and generates optimized CSS. Advanced features include presets (circle, pill, blob shapes), unit selection, and browser prefix generation for older browsers.
Use Cases
1. Button Styling
Create rounded button corners for modern UI. Standard buttons use 4-8px radius, pill-shaped buttons use large radius (50px or 50%), subtle rounding uses 2-4px.
2. Card & Container Design
Design cards, panels, and containers with rounded corners for softer, friendlier UI. Cards typically use 8-16px radius for modern aesthetics.
3. Avatar & Image Shapes
Create circular avatars (50% radius on square images) or rounded image corners. Partially rounded corners create distinctive image treatments.
4. Custom Shapes
Create organic, blob-like shapes by varying each corner's radius independently. Useful for decorative elements, backgrounds, illustrations.
5. Badge & Tag Components
Design rounded badges, tags, and labels. Fully rounded pills for tags, slightly rounded rectangles for badges.
Create rounded button corners for modern UI. Standard buttons use 4-8px radius, pill-shaped buttons use large radius (50px or 50%), subtle rounding uses 2-4px.
2. Card & Container Design
Design cards, panels, and containers with rounded corners for softer, friendlier UI. Cards typically use 8-16px radius for modern aesthetics.
3. Avatar & Image Shapes
Create circular avatars (50% radius on square images) or rounded image corners. Partially rounded corners create distinctive image treatments.
4. Custom Shapes
Create organic, blob-like shapes by varying each corner's radius independently. Useful for decorative elements, backgrounds, illustrations.
5. Badge & Tag Components
Design rounded badges, tags, and labels. Fully rounded pills for tags, slightly rounded rectangles for badges.
Tips & Best Practices
• Use 50% border-radius on square elements to create perfect circles
• For pill shapes: use large radius (50px+) or 50% on one axis
• Keep radius values consistent across similar components for visual harmony
• Use rem units for scalable designs that adapt to font size changes
• Test on different element sizes - fixed px radius may look odd on varying heights
• Modern browsers don't need -webkit- prefixes anymore
• Percentages are relative to element dimensions, px is absolute
• Combine with overflow: hidden to clip child content to rounded shape
• For pill shapes: use large radius (50px+) or 50% on one axis
• Keep radius values consistent across similar components for visual harmony
• Use rem units for scalable designs that adapt to font size changes
• Test on different element sizes - fixed px radius may look odd on varying heights
• Modern browsers don't need -webkit- prefixes anymore
• Percentages are relative to element dimensions, px is absolute
• Combine with overflow: hidden to clip child content to rounded shape
Frequently Asked Questions
Related Tools
Explore more tools that might help you