CSS Border Radius Generator
Design asymmetric CSS rounded corners with independent horizontal and vertical radii, a live shape preview and copyable CSS.
Set your values
Adjust the values, then calculate your result.
How to use CSS Border Radius Generator
- Set horizontal and vertical percentages for each corner.
- Generate the shape preview to see how the eight radii interact.
- Copy the slash-separated border-radius declaration to your component.
Use the slash syntax for elliptical corners
CSS accepts four horizontal radii followed by a slash and four vertical radii. The order on each side is top-left, top-right, bottom-right, bottom-left. Percentages are relative to the corresponding box dimension, so the same declaration can produce a different silhouette on a tall or wide element.
Understand automatic radius scaling
If adjacent corner radii exceed the available edge length, CSS scales the radii down according to its overlap rules. This generator displays the actual browser result rather than claiming every percentage maps directly to an independent circle. Use it for badges, cards, and decorative shapes, then verify clipping and focus outlines in the final layout.
Can I make a circle with this tool?
Use 50% for all radii on a square element. A rectangle with the same values produces an ellipse.
Is input uploaded?
Processing takes place in your browser. This tool does not send your input or selected files to a conversion API.