CSS Border Radius Generator
BetaSet each corner radius with a live preview and copy the CSS. Switch between pixels and percentages, link the corners, and get the matching Tailwind class when one exists.
- Free, no sign-up
- Updated
- Reviewed by Olgun Ozoktas
Tailwind ships a fixed radius scale, so a class is offered only when your value matches one exactly. Any other value needs arbitrary syntax such as rounded-[18px].
How to generate a CSS border radius
-
Pick a unit
Pixels give a fixed radius that stays the same at any element size. Percentages scale with the element, and 50% on every corner produces an ellipse. -
Set the corners
Leave the corners linked to round all four together, or unlink them to shape each one. The preview updates as you drag. -
Try a preset
Sharp, Subtle, Card, Pill, Circle and Leaf cover the common shapes. A preset unlinks the corners so you can adjust from there. -
Copy the CSS
Copy the declaration straight into your stylesheet. When the value matches Tailwind's scale exactly, the matching class is offered beside it.
Common Use Cases
Cards and panels
Pill buttons and badges
Avatars and circular crops
Asymmetric shapes
Why use a border radius generator?
The border-radius property looks simple until you need four different corners. The shorthand takes its values clockwise from the top left, a value larger than half the element is silently clamped, and a percentage is resolved against the element's own box rather than a fixed length. Each of those is easy to get wrong by one reload.
This generator shows the shape while you drag and writes the declaration underneath. When all four corners agree it emits the single-value short form; when they differ it emits the four-value shorthand in the correct order. The unit switch matters more than it looks: pixels hold their radius at any size, while percentages scale with the element and turn a square into a circle at 50%.
A Tailwind class is offered only when your value matches the framework's fixed scale exactly, because suggesting rounded-lg for 13px would be wrong. Everything runs in your browser. For the rest of the CSS surface, the Box Shadow Generator, Gradient Generator and Glassmorphism Generator follow the same shape.
How it compares
Dev tools let you drag a radius on a live page, which is excellent for an element that already exists and useless when you are writing the rule first. A generator gives you the declaration before the markup, and shows all four corners at once rather than one at a time.
This page is deliberately narrow: it writes border-radius and nothing else. It does not generate a whole component, and the Tailwind hint is withheld rather than approximated when your value is off the scale.
Border Radius Tips
- The shorthand order is top-left, top-right, bottom-right, bottom-left - clockwise from the top left. Getting it backwards is the most common mistake.
- A radius larger than half the element is clamped by the browser, so a huge pixel value is a reliable way to get a pill shape at any height.
- Percentages are relative to the element's own width and height, so the same percentage looks different on a square and on a wide rectangle.
- Rounding a parent does not clip a child. Add overflow: hidden to the parent when an image or background should follow the curve.
- Your values stay in the browser and nothing is uploaded to FindUtils. The page itself is not request-free: like the rest of the site it loads advertising and analytics scripts.