CSS Border Radius Generator
Create smooth corner radii with our CSS border radius generator. Tweak each corner value, preview the shape, and copy CSS. Perfect for dev work.
CSS Border Radius Generator
20px
20px
20px
20px
20px
10px
rgb(255,0,0)
rgb(3,161,161)
Preview
CSS Code
What this does
So you want rounded corners on an element and you would rather see them than guess at the numbers. This builds the CSS for you. Drag the sliders for each corner, set the border and colours, watch the preview update, and copy the border-radius code when it looks right.
How to use it
- Use the All Corners slider to round every corner equally, or set each corner on its own with the four corner sliders.
- Adjust the border width, style, and colours if you want them, and watch the preview change as you go.
- Copy the generated CSS with the Copy Code button.
How it works
As you move the controls, the tool builds the matching CSS and applies it to the preview box at the same time, so what you see is exactly what the code will produce. There is no library doing the work and nothing to install, it all runs in your browser, live.
Understanding border-radius
The border-radius property rounds the corners of an element, and it is worth knowing how the shorthand reads. When four values are given, they run clockwise starting from the top left: top left, top right, bottom right, bottom left. So border-radius: 10px 20px 30px 40px rounds each corner by a different amount in that order. Give it a single value and all four corners share it.
The size you choose sets how far the rounding reaches. Small values soften the corners slightly, while a large value, or 50 percent on a square, curves them all the way into a circle. That is the trick behind round avatars and pill shaped buttons.
You will notice the output also includes -webkit- and -moz- versions of the property. Those are old vendor prefixes from years ago. Every current browser supports plain border-radius on its own, so you can keep the prefixed lines for very old browser support or simply drop them.
Questions people ask
What order do the four values go in?
Clockwise from the top left: top left, top right, bottom right, bottom left. A single value applies to all four corners equally.
How do I make a perfect circle?
On a square element, set the radius to 50 percent, or to a value at least half the element's size. That curves every corner fully and gives you a circle.
Do I need the -webkit- and -moz- lines?
Not for modern browsers, which all support plain border-radius. The prefixed lines only matter for very old browsers and are safe to remove otherwise.
Does it work offline?
Yes. It all runs in your browser, with no server involved, so it keeps working without a connection.
References
- MDN Web Docs. border-radius. https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
- World Wide Web Consortium. CSS Backgrounds and Borders Module Level 3. https://www.w3.org/TR/css-backgrounds-3/
Sugam Baskota is a senior software engineer and Computer Science graduate from UT Arlington, with interests in user scripts, browser extensions, developer tooling, and productivity systems. He spends time building practical utilities and extensions in the kinds of workflows Eon is designed to simplify. At Eon Tools, he reviews useful, password, and developer tools.