Border Radius Generator
Create perfect CSS rounded corners with real-time preview
0px
200px
px
px
px
px
px
px
px
px
px
CSS Border Radius Explained
The CSS border-radius property defines the radius of an element's corners. It's used to add rounded corners to elements and can create everything from subtle curves to perfect circles.
Syntax:
border-radius: top-left top-right bottom-right bottom-left;
Property Values:
- Single value - Applies to all four corners (e.g.,
border-radius: 10px;) - Two values - First applies to top-left and bottom-right, second to top-right and bottom-left
- Three values - First to top-left, second to top-right and bottom-left, third to bottom-right
- Four values - Each value applies to a different corner (top-left, top-right, bottom-right, bottom-left)
- Percentage values - Creates elliptical corners (50% makes a perfect circle/ellipse)
Advanced Usage:
You can define horizontal and vertical radii for each corner separately to create elliptical corners:
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
The values before the slash are the horizontal radii and the values after are the vertical radii.
Browser Support:
The border-radius property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It works in Internet Explorer 9 and later.