CSS Generator
CSS Border Radius Generator
Round each corner with its own slider and watch the shape update live, then copy CSS that is already written in its shortest correct form. Switch on elliptical corners to get the two-radius / syntax behind those organic blob shapes, choose px, percent, em, or rem, and start from a preset such as pill, circle, leaf, or ticket. You can also paste an existing border-radius value to load it back into the sliders and tweak it.
Horizontal radius
Vertical radius
Presets
Paste a border-radius value to load it into the sliders.
That is not a border-radius value this editor can read. Use one to four lengths, optionally followed by a slash and one to four more.
How the border-radius shorthand works
One value rounds all four corners. Two values set top-left / bottom-right then top-right / bottom-left. Three set top-left, then both of the other diagonal corners, then bottom-right. Four run clockwise from the top left. The generator always writes the shortest form that produces your shape, so an even 12px radius comes out as border-radius: 12px rather than the same number four times.
Elliptical corners and the slash
Every corner really has two radii — one horizontal, one vertical — and the slash separates them: border-radius: 40px / 20px gives corners that are wider than they are tall. Turning on elliptical corners exposes the second set of sliders, and it is how the organic blob shapes are made. Without the slash both radii are the same and each corner is a quarter circle.
Pixels or percentages?
Pixels keep the same curve whatever size the element is, which is what you want for buttons, cards, and inputs. Percentages are relative to the element's own width and height, so the curve grows with the box — 50% turns any square into a circle and any rectangle into an ellipse. For a pill that stays pill-shaped at any height, use a large pixel value such as 999px: the browser caps it at half the shorter side, so it can never over-round.
Rounding that survives real content
If the radii on one side add up to more than that side's length, the browser scales every radius down proportionally rather than letting the corners overlap — which is why a huge value degrades gracefully instead of breaking. Remember that a rounded parent does not clip its children unless you add overflow: hidden, and that an inner element needs a slightly smaller radius than its padding-offset parent to look concentric rather than pinched.
Frequently asked questions
How do I make a circle with border-radius?
Set the radius to 50% on an element that is exactly as wide as it is tall. Percentages are measured against the element's own width and height, so 50% turns a square into a circle and a rectangle into an ellipse. The Circle preset above does this in one click.
What is the difference between 50% and 999px?
A percentage scales with the element, so 50% is always a full circle or ellipse. A large pixel value is capped by the browser at half the shorter side, which gives you a pill with straight sides that stays correct at any height. Use 999px for buttons and tags, and 50% when you genuinely want an ellipse.
What does the slash in border-radius mean?
It separates the horizontal radii from the vertical ones. Every corner has both, so border-radius: 40px / 20px makes corners that curve twice as far across as they do down. Writing a value with no slash simply means both radii are equal and each corner is a quarter circle.
Why does my huge radius not look wrong?
When the radii along one side add up to more than the length of that side, the browser scales every radius down by the same factor so the corners cannot overlap. That is why 999px degrades into a neat pill instead of breaking the layout, and it is defined behaviour rather than a quirk.
Does a rounded parent clip its children?
Not on its own. Add overflow: hidden to the rounded element and its children will be clipped to the curve — otherwise an image or background inside will still show square corners poking out. For nested boxes, give the inner one a slightly smaller radius than the outer so the curves look concentric.