CSS Border Radius Generator
This border radius generator lets you set each corner independently and writes the shortest CSS that produces the result — one value when all four match, two when the diagonals match, three when only one pair does, and four only when they genuinely differ. That shorthand is easy to get wrong by hand, because the order runs clockwise from the top left and the two and three value forms pair corners in a way that is not obvious. Percentage radii are relative to the element dimensions, which is how you make a pill or a perfect circle at any size without knowing the size in advance.
How it works
Sets each corner independently and writes the shortest CSS that produces it — one value when all four match, two when the diagonals match, and four only when they genuinely differ.
Percentage radii are relative to the element size, which is how you make a pill or a perfect circle regardless of dimensions.
Everything runs in your browser — nothing you enter is sent to a server.
The shorthand, decoded
| Values | Applies to |
|---|---|
| One | All four corners |
| Two | Top-left and bottom-right, then top-right and bottom-left |
| Three | Top-left, then both other diagonal corners, then bottom-right |
| Four | Clockwise from top-left |
The two and three value forms pair opposite corners rather than adjacent ones, which is the part almost everyone gets wrong from memory.
Percentages and clamping
A percentage radius refers to the element's own width and height. If the radii on one side add up to more than that side's length, the browser scales all of them down proportionally so they still fit — which is why a generous radius on a short element quietly comes out smaller than you asked for.
Elliptical corners
CSS also allows a slash form giving separate horizontal and vertical radii, producing elliptical rather than circular corners. It is rarely needed, but it exists.
Frequently asked questions
What order does the shorthand use?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Two values pair the diagonals; three sets top-left, then both remaining corners of one diagonal, then bottom-left.
How do I make a pill shape?
Set the radius to 50% or to any value larger than half the height — the browser clamps it, so a large px value works regardless of the element size.
How do I make a circle?
A 50% radius on an element with equal width and height. On an unequal element, 50% produces an ellipse.
What is the difference between px and percent?
A px radius is the same regardless of element size. A percentage is relative to the element dimensions, so it scales — which is what you want for pills and circles.
Why does my radius look wrong on a small element?
Because a radius larger than half the element is clamped proportionally. Two large radii on a short element are reduced together, which can produce a shape you did not expect.
Is anything uploaded?
No. Everything runs in your browser.
Related tools
CSS Box Shadow Generator
This box shadow generator stacks multiple layers with a live preview.
CSS Button Generator
This button generator builds a complete style including hover and active states.
Glassmorphism CSS Generator
This generator builds the frosted-glass effect with backdrop blur and a live preview.