đ˛ CSS Border Radius Generator
Set each corner independently (top-left, top-right, bottom-right, bottom-left), watch the preview update, then copy the CSS.
What the four numbers mean
The generator writes the four-value shorthand, and the order is clockwise starting at the top-left corner:
border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;
border-radius: 12px 12px 12px 12px; /* the default, all corners equal */
border-radius: 24px 0 24px 0; /* leaf shape */Each box is read as a number of pixels, clamped so it can never go below 0, and written straight into the preview element. Nothing is normalised into the shorter two- or three-value form, so the copied rule always has four values even when they are identical.
The three buttons
- Link all corners copies whatever is in top-left into the other three, which is the fastest way to get an even radius.
- Pill shape sets every corner to 9999px. A browser caps a radius at half the box's shorter side, so any absurdly large number gives you perfect semicircular ends whatever the element's size.
- Reset puts all four back to 12px.
overflow: hidden. Without it, an image or background inside the box
will square off the corners you just rounded.Frequently asked questions
What order do border-radius corners go in?
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. So 24px 0 24px 0 rounds the top-left and bottom-right only.
How do I make a perfect circle in CSS?
Give the element equal width and height, then border-radius: 50%. For a pill on a rectangle, use a huge pixel value instead - the browser caps it at half the shorter side.
Can border-radius take a percentage?
Yes, and percentages are relative to the box's own width for the horizontal part and its height for the vertical part. This tool outputs pixels, which stay the same as the element resizes.