CSS Border Radius Generator — Rounded Corners, Pills and Blobs
Set each corner separately, add elliptical radii for organic shapes, preview live, and copy the shortest CSS that produces it.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Build a CSS border-radius visually: each corner has its own value, and each can have a separate vertical radius for the elliptical corners that make blobs, leaves and eggs. The preview updates as you type and the output is the shortest valid shorthand — 16px rather than 16px 16px 16px 16px, and the / syntax only when the corners are actually elliptical.
How to use Border Radius Generator
- Pick a preset (soft, pill, card, blob…) or type the four corner values.
- Tick "elliptical" to set vertical radii separately for organic shapes.
- Choose the unit — px for fixed corners, % for shapes that scale with the element.
- Copy the CSS.
How border-radius shorthand works
Four values go clockwise from the top-left: border-radius: 10px 20px 30px 40px is top-left, top-right, bottom-right, bottom-left. Two values mean top-left+bottom-right then top-right+bottom-left; three mean top-left, top-right+bottom-left, bottom-right. After a slash, the same pattern gives the vertical radii: 50% / 20% makes wide, flat ellipses at every corner. This generator emits the shortest form that is still exactly the shape you drew.
Pills, circles and blobs
- Pill: a radius at least half the height on every corner —
999pxis the common trick, because anything larger than half the height is clamped to a semicircle. - Circle:
50%on a square element. - Blob: different horizontal and vertical radii per corner, e.g.
30% 70% 70% 30% / 60% 40% 60% 40%. Percentages keep the shape when the element resizes; pixels do not. - Card top: radius on the top corners only, for a header that sits flush on a container.
Percentages vs pixels
Pixel radii are the same size whatever the element's dimensions — right for buttons and cards. Percentage radii are relative to the element's own width (horizontal) and height (vertical), so a 50% radius is a circle on a square and an ellipse on a rectangle; they are the choice for shapes that should scale.
For the rest of a card's look, the box-shadow generator and the glassmorphism generator.
Frequently asked questions
How do I make a perfect circle?
Give a square element border-radius: 50%. On a rectangle, 50% gives an ellipse; for a pill on a rectangle, use a pixel radius of at least half the height — 999px is the usual shorthand.
What does the slash in border-radius mean?
Values before the slash are horizontal radii, values after it are vertical radii, corner by corner. Different horizontal and vertical radii make elliptical corners — the basis of blob and leaf shapes.
Why does a large radius get clamped?
When adjacent radii would overlap (their sum exceeds the side length), browsers scale all radii down proportionally so the curves still fit. That is why 999px on every corner produces a clean pill rather than a broken shape.
Does border-radius clip the content?
Backgrounds and borders are clipped to the rounded shape; child content is not unless the element has overflow: hidden. Add that to round the corners of an image inside a card.
Should I use px or %?
Pixels for fixed corners on buttons and cards, which should look the same at every size. Percentages for shapes that should scale with the element — circles, blobs, avatar frames.