How to use the CSS Border Radius Generator
- 1. Pick a preset or unitRounded card, pill, circle, blob, leaf, ticket or drop; px, % or rem.
- 2. Shape the cornersLink all corners or set each one; turn on elliptical corners for organic shapes.
- 3. Get the CSSCopy the border-radius rule or the Tailwind arbitrary class.
How border-radius works
Each corner is a quarter of an ellipse. With one value per corner, the curve is circular. With elliptical corners, each corner gets a horizontal radius and a vertical radius, written as the four horizontal values, a slash, then the four vertical values, in the order top-left, top-right, bottom-right, bottom-left. Percentages are measured against the element's own width (horizontal) and height (vertical), so 50% on a square gives a circle and on a rectangle gives an ellipse. Your code is processed in your browser and never uploaded.
The tool writes the shortest equivalent value. If all four corners match, you get one value; if opposite corners match, two; if the right-hand corners match, three. If corner radii add up to more than the box, browsers scale them down proportionally, so huge values like 999px safely make a pill.
Worked example
The Blob preset uses elliptical corners in percent: top-left 30%/30%, top-right 70%/30%, bottom-right 70%/70% and bottom-left 30%/70%. The tool writes border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; and the Tailwind class rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]. The default Rounded card is simply 16px.
Good to know
- Use
remif corner sizes should grow with the user's font size. - Images inside a rounded box need
overflow: hiddenon the box, or the radius on the image itself. - Every preset was checked in Chromium and accepted without dropped values.
Frequently asked questions
What's the difference between 50% and 999px?
50% makes an ellipse that follows the box's shape; 999px makes a pill with fully round ends whatever the width.
Can I animate border-radius?
Yes, it animates smoothly; morphing blobs are often made that way.
Is the border radius generator free?
Yes. You can open the border radius generator, paste code and change every setting without signing up. When you get the CSS for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.