Question 1

What order are the four values in a border-radius shorthand?

Accepted Answer

border-radius: a b c d assigns the corners clockwise starting at the top-left: a = top-left, b = top-right, c = bottom-right, d = bottom-left. That clockwise-from-top-left order is the same pattern CSS uses for margin and padding starting points, but note it walks the corners, not the edges. When you give fewer than four values the browser fills the rest by symmetry: one value rounds all four corners equally, two values set (top-left & bottom-right) then (top-right & bottom-left), and three values set top-left, then (top-right & bottom-left), then bottom-right. This tool always emits the shortest of those forms that is still exactly equivalent.

Question 2

What does the slash in a border-radius value mean?

Accepted Answer

The slash separates the horizontal radii from the vertical radii, letting each corner be an ellipse instead of a quarter-circle. border-radius: 40px 20px 40px 20px / 20px 40px 20px 40px reads as four horizontal radii before the slash and four vertical radii after it, paired corner by corner in the same top-left, top-right, bottom-right, bottom-left order. When every corner's horizontal and vertical radius are equal the slash is unnecessary and the value is written without it. Turning on Elliptical here exposes a separate X and Y control per corner, which is how you build squircle and organic blob shapes.

Question 3

Why is my collapsed value the same as the long one?

Accepted Answer

The four-value, two-value and one-value forms are defined to be exactly equivalent, so collapsing changes only the text, never the rendered shape. border-radius: 10px 10px 10px 10px, 10px 10px and 10px all round every corner by ten pixels; the browser expands whichever you write back to the same four corners internally. This generator collapses to the shortest correct form because it is easier to read and diff, and it never collapses across the slash — if any corner is elliptical it keeps both the horizontal and vertical lists so no radius is lost.

Question 4

Should I use px or percent for border-radius?

Accepted Answer

Use pixels when you want a fixed corner regardless of the box size — a 12px radius looks the same on a small chip and a large card. Use a percentage when you want the rounding to scale with the element: 50% on a square makes a perfect circle, and 50% on a rectangle makes a pill/ellipse because the percentage is taken from the box's own width and height. A percentage radius that adds up to more than 100% of a side is clamped by the browser, which is exactly why 50% reliably gives a circle. This tool lets you switch the unit and reclamps the sliders to a sensible range for each.

Question 5

How do I make a perfect circle or a pill shape?

Accepted Answer

Set a single radius of 50% on a square element and it becomes a circle; on a wide rectangle the same 50% produces a pill (a rectangle with fully rounded ends). If you prefer pixels, use a radius at least half the element's smaller dimension — for a 200px square, 100px or more rounds it fully. Link the corners in this tool and drag toward the maximum to watch a rounded square morph into a circle in the live preview, then copy the value.

Question 6

Is anything I build here uploaded?

Accepted Answer

No. The preview and the border-radius string are computed with plain JavaScript running inside your own browser tab. There is no server call and no logging of what you build — you can disconnect from the internet and the generator keeps working. The only network request the page makes is the site's privacy-friendly, cookieless page-view counter.

CSS Border-Radius Generator

What the border-radius shorthand actually says

The slash and the elliptical form

Why the collapsed value is equivalent

px versus percent

Honest limits