Free CSS Border Radius Generator Tool Online
Create rounded corners with a visual editor, live preview, per-corner controls, and copy-ready CSS for buttons, cards, and UI elements.
IN: Radius per corner · OUT: CSS border-radius · RUNS: 100% in your browser
border-radius: 16px;
Frequently asked questions
How does per-corner border-radius work in CSS?+
The border-radius property accepts up to four values in the order top-left, top-right, bottom-right, bottom-left, letting each corner have an independent radius rather than a single uniform value.
What's a reasonable radius for buttons vs cards?+
Small UI elements like buttons often use 4-8px for a subtle rounded look, while cards and larger containers often use 12-24px; fully circular elements (like avatars) use 50% instead of a pixel value.
Can I create pill-shaped buttons with this tool?+
Yes, set the radius to about half the element's height (or use the uniform slider near its maximum) for a fully rounded, pill-shaped edge on rectangular buttons.
Does border-radius work with percentage or other units?+
This tool outputs pixel values for precision, but border-radius also accepts percentages, em, and rem units in real CSS if you prefer a different unit system.
Is border-radius supported in all browsers?+
Yes, it has full support in all modern browsers without vendor prefixes, and has been reliably supported for well over a decade.