What is the order of the four values?

Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. The same order as margin and padding shorthand.

When should I use percentages?

When the curve should scale with the element. 50% on all four corners always produces an ellipse regardless of size, which is how circular avatars are made. Fixed px or rem keeps the same curve on any size.

Why do my rounded corners look wrong on a small element?

If the radii on one side add up to more than that side's length, browsers scale all of them down proportionally. A 40px radius on a 50px-tall box will not render as 40px.

Border Radius Generator

Shape an element's corners and read the CSS off the result. Link the corners for a uniform radius or unlink them to round each one separately, and switch between pixels, rem, and percentages to see how each behaves. The output collapses to the short form when all four corners match.

Design Tools

px%rem

Top left16px

Top right16px

Bottom right16px

Bottom left16px

border-radius: 16px;

Percentages are relative to the element’s own width and height, so the same value produces a different curve on a different size — 50% on every corner always gives an ellipse. Pixels and rem stay fixed.

Private by default

This tool runs entirely in your browser. Your data is never uploaded to a server.

How it works

How the shorthand expands

border-radius: top-left top-right bottom-right bottom-left;

One value rounds every corner equally; four values set them clockwise from the top left. Each corner is a quarter of an ellipse, and a single value makes that ellipse a circle.

Percentages resolve against the element's own width for the horizontal radius and its height for the vertical one, so they produce an ellipse on any non-square box.
Radii are scaled down proportionally when they would overlap on a side — the shape stays valid rather than self-intersecting.
A slash in the full syntax separates horizontal from vertical radii, which is how squircle-like shapes are made.
rem tracks the root font size, so corners scale with a reader who has enlarged their text.

For reference

Radii that come up repeatedly

Value	Typical use
2–4px	Inputs and small buttons
6–8px	Buttons, badges, tags
12–16px	Cards and panels
24px and up	Hero sections, large modals
9999px	Pill shapes — larger than any side
50%	Circles and ellipses

The pill trick relies on the proportional scaling above: any radius bigger than half the shorter side is clamped to exactly that.

How to use

4 clear steps.

Choose the unit: px, rem, or percent.
Unlink the corners if you want them to differ.
Drag each slider and watch the preview.
Copy the generated CSS declaration.

Good to know

Frequently asked questions

What is the order of the four values?: Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. The same order as margin and padding shorthand.
When should I use percentages?: When the curve should scale with the element. 50% on all four corners always produces an ellipse regardless of size, which is how circular avatars are made. Fixed px or rem keeps the same curve on any size.
Why do my rounded corners look wrong on a small element?: If the radii on one side add up to more than that side's length, browsers scale all of them down proportionally. A 40px radius on a 50px-tall box will not render as 40px.