Border radius generator
Set each corner and copy the CSS.
- Runs in your browser — your text is never sent anywhere
- No sign-up, no quotas, free to use as often as you like
How it works
border-radius is simple until you want three corners rounded and one square, at which point everyone has to look up the order of the four values.
The order, for good
Top-left, top-right, bottom-right, bottom-left — clockwise starting from the top left. The same clockwise-from-top-left order applies to margin, padding and border shorthands too, which is worth committing to memory once.
Pixels or percent
Pixels give the same curve whatever the element's size. Percentages are relative to the element's own width and height, so the curve scales — and a 50% radius on a square gives a perfect circle, which is the standard trick for round avatars.
The pill shape
A radius larger than half the element's height is clamped to exactly half, which is why border-radius: 999px reliably produces a pill whatever the height. It is more robust than calculating the right value, because it keeps working when the content changes.
When corners look wrong on nested elements
A rounded box inside another rounded box needs a smaller radius on the inner one, reduced by the padding between them, or the curves will not sit concentrically. It is a small detail that makes cards look properly made.
Border radius generator — questions
What order are the four values in?
Top-left, top-right, bottom-right, bottom-left — clockwise from the top left.
How do I make a perfect circle?
border-radius: 50% on an element that is exactly square.
How do I make a pill button?
Use a large value such as 999px. Browsers clamp it to half the height, so it works at any size.
Should I use pixels or percent?
Pixels for a consistent curve; percent when you want it to scale with the element.
Does it work everywhere?
Yes. border-radius has been supported without a prefix for well over a decade.