Generate CSS border-radius code visually. Set each corner in pixels or percent, preview the shape live and copy the CSS. Free border radius generator.
About this tool
Set individual corner radii in pixels or percentages.
How to use CSS Border Radius Generator
- Choose Unit and whether all corners should share the same value.
- Adjust Top left, Top right, Bottom right and Bottom left.
- Copy the border-radius CSS and test it on an element of your intended size.
Worked example
Use matching 12px corners on a rectangular card, then unlink them to create an asymmetric shape.
Why do percentage corners look different on a rectangle?
Percentage radii depend on the element dimensions, so horizontal and vertical curvature can differ.
Will rounded corners clip child content automatically?
Not always. You may need appropriate overflow rules on the actual element, depending on your layout.
Explore CSS Tools · More practical guides