Border-Radius Generator
Round every corner at once or one at a time, see the shape update live,
and copy clean border-radius CSS in a click.
Round corners, exactly the way you want
Cards, buttons and avatars all lean on border-radius. This
generator lets you shape each corner with a slider and see the result
instantly, so you can match a design spec or experiment freely without
editing CSS and reloading.
How to use it
- Keep corners linked to round all four evenly with one slider.
- Unlink to set each corner independently for asymmetric shapes.
- Watch the preview update as you drag, then copy the CSS.
Frequently asked questions
How do I round corners individually?
Turn off 'Link corners' and each slider controls one corner — top-left, top-right, bottom-right and bottom-left. Leave it on to round all four corners together.
Why does the output sometimes collapse to one value?
When all four corners share the same radius, CSS only needs a single value, so the tool outputs the shorthand. As soon as corners differ, it expands to the four-value form.
How do I make a perfect circle or pill?
Set every corner high (50% of the box, or a large pixel value) on a square element to get a circle. For a pill button, use a big radius like 999px on a wide element.
Does the output work everywhere?
Yes. border-radius is supported in every modern browser with no prefixes. The value is plain CSS you can paste straight into a rule.
Is anything uploaded?
No. The preview and CSS are generated entirely in your browser. Nothing is sent to a server.