CSS Border Radius Generator

What order does the border-radius shorthand use?

border-radius is a shorthand for four separate properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. The values you write are read in exactly that order, starting at the top left corner and moving clockwise. The most common mistake is reading them the way margin and padding are read, as top, right, bottom, left. border-radius counts corners, not edges.

Write fewer than four values and the missing corners are copied from the corner opposite them. One value rounds all four equally. Two values give the first to the top left and bottom right, the second to the top right and bottom left. Three values set the top left, then the top right together with the bottom left, then the bottom right. Four values address every corner individually.

Shorthand forms compared

What the slash does, and what an elliptical corner is

By default every corner is a quarter circle, because its horizontal and vertical radius are the same. Add a slash and the declaration splits in two: values on the left set the horizontal radii, values on the right the vertical ones. Each corner becomes a quarter ellipse, and you end up controlling eight numbers rather than four.

Every blob shaped element you have seen on the web is built this way; the four value form cannot produce one, because it forces each corner to be a symmetric arc. The two sides of the slash shorten independently, so 50% / 30% 70% is valid: one value on the left spreads across all four corners while two on the right split into corner pairs.

px versus percent, and why percent distorts

A pixel radius is a fixed length. A 12px corner looks the same whether the box is 100 or 1000 pixels wide. That predictability is why almost every design system sticks to pixels: a component that stretches keeps the same corner.

A percentage is measured against the element itself, and here is the detail people miss. The horizontal radius is a percentage of the box width, while the vertical radius is a percentage of the box height. On a square that produces the same number twice and the corner reads as a circle. On a 320 by 80 box, 20% works out to 64 pixels across and 16 pixels down, and the corner flattens visibly. That is exactly why this tool lets you resize the preview box on both axes.

Why 9999px is the safe pill idiom

The instinct when making a fully rounded button or tag is to reach for 50%, but that gives the wrong shape. A 50% radius takes half the width horizontally and half the height vertically, so on a wide, short box you get an ellipse with pointed ends rather than a pill with clean semicircular caps.

The reliable idiom is a pixel value comfortably larger than the box: 9999px. When the radii do not fit, the browser scales them all down by the same factor, so the radius settles at exactly half the box height and the ends come out as true semicircles. 999px or 100vmax do the same job.

What the browser does when radii overlap

If the two radii along one edge add up to more than the length of that edge, the shape would cut into itself. The specification avoids this with a precise rule: for every edge the browser divides the edge length by the sum of the two radii on it, takes the smallest of those four ratios, and if that value is below one, multiplies every radius by it.

The part worth remembering is that the scaling applies to the whole shape, not to the offending corner alone. Push one corner past what fits and all four shrink together. That rule is what makes the 9999px pill behave identically at any box size.

Corners, overflow and borders

border-radius only clips the element's own background and border. Child elements, absolutely positioned layers and video still spill past the rounded corner. Clipping those needs overflow: hidden on the container, at a cost: a box-shadow on the same element can no longer escape it, position: sticky may stop working inside it, and dropdowns get cut off at the edge.

How far the background reaches is controlled by background-clip. The default border-box paints the background all the way under the border, so a semi transparent border lets it show through. padding-box stops the background at the padding edge instead. When the two borders meeting at a corner have different widths, the browser draws a smooth transition between them, which is why the curve sometimes looks different from what you expected.

Nested boxes need a small calculation: the inner radius should be the outer radius minus the padding between them. If the outer card has a 16px radius and 8px of padding, give the inner element 8px and the two curves stay concentric. Give both 16px and the inner corner reads as rounder than the outer one.

Why CSS cannot draw a real squircle

The squircle used by iOS icons and by a lot of recent interface work is a superellipse. The transition from the straight edge into the curve is continuous rather than abrupt, and that is where the soft shoulder your eye picks up comes from. border-radius places a circular or elliptical arc at each corner, so curvature jumps the moment the edge meets the arc.

The workarounds have been an SVG path, clip-path or a mask. On the CSS side the corner-shape property is being specified for exactly this: corner-shape: superellipse(...) asks the browser to draw a superellipse arc instead of a circular one. Support is only starting to spread, so approximating the look with elliptical radii is still the practical choice in production.

Common mistakes

• Using 50% for a pill. On anything that is not square the result is an ellipse.
• Reading the shorthand as edges. The values start at the top left and go clockwise.
• Repeating the same radius on nested boxes. The inner one should be smaller by the padding.
• Adding overflow: hidden by reflex. If nothing needs clipping you lose shadows and sticky positioning for nothing.
• Testing percentage radii only on a square. The corner changes once the element stretches.

Once the corners are settled, build a background with the CSS gradient generator and drop it into the preview here to judge both decisions together.