01
Evenly rounded corners
16 px on all four corners copies as border-radius: 16px; — the single-value shorthand.
Border Radius Generator
Designer ToolsGenerate CSS border-radius for rounded corners with a live preview — free online.
About
About the Border Radius Generator
Sets the CSS border-radius of each corner with sliders, in pixels or percent, shows the shape live and writes the shortest border-radius shorthand for it.
Designers use it to try out rounded, pill and leaf-shaped corners visually, while developers use it to get the shortest correct border-radius value instead of writing out all four corners. It's one of many free designer tools on Toolapt, and like every tool here, it's free to use with no sign-up and no limit on how many times you run it.
Examples
Border Radius Generator examples
3 worked examples
02
A leaf shape
Top-left and bottom-right at 40 px with the other two at 0 copies as border-radius: 40px 0; — two values, because opposite corners match.
03
Rounded top only
Top corners at 20 px and bottom corners at 0 copies as border-radius: 20px 20px 0 0; — handy for a card with an image along its top edge.
Related tools
FAQ
Frequently asked questions
Quick answers to common questions about the Border Radius Generator.
What does the Border Radius Generator do?
It lets you set how rounded each corner of an element is, previews the shape and gives you the border-radius CSS to copy.
In what order are the four values?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. With two values, the first sets top-left and bottom-right and the second sets top-right and bottom-left.
Should I use px or %?
Pixels give the same curve whatever the element's size, which suits buttons and cards. Percent scales with the element — 50% turns a square into a circle and a rectangle into an ellipse.
How do I make a pill-shaped button?
Use a pixel radius at least half the button's height — for example 999px. The browser caps it, so the ends become perfect semicircles.
Why does the tool sometimes output fewer than four values?
It writes the shortest shorthand that gives the same result. If all corners are equal you get one value, and if opposite corners match you get two.
Is the Border Radius Generator free to use?
Yes. It's free, with no sign-up, no watermark and no limit on how many times you use it.
Is my input safe when I use this tool?
Yes. Everything is calculated and previewed on your own device — nothing is sent to a server.