Border Radius Generator

Generates CSS border-radius values with independent control over each corner. Supports the eight-value notation (horizontal/vertical radii separated by a slash) for elliptical corners.

The shorthand syntax supports one to four space-separated values for the corners, plus an optional slash followed by the same for vertical radii.

The CSS border-radius property accepts up to eight values total. With one value, all four corners share that radius. With two, the first applies to top-left and bottom-right, the second to top-right and bottom-left. Three values set top-left, then top-right plus bottom-left, then bottom-right. Four values address each corner individually in clockwise order from top-left. The slash separator introduces independent vertical radii: '50px 20px 50px 20px / 20px 50px 20px 50px' makes each corner elliptical rather than circular, producing the leaf-like silhouette popular in retro UI revival design. Without the slash, the horizontal and vertical radii are equal and corners are quarter-circles.

A worked example: '50%' on a square element produces a full circle, because the horizontal radius equals half the width and the vertical equals half the height. On a rectangle, '50%' produces an ellipse stretched along the longer dimension. A pill shape on a button is achieved with 'border-radius: 9999px' (or any value larger than half the height), which the spec clamps to the maximum sensible value. Card components typically use 8-16px for subtle rounding, 24-32px for the soft, friendly look characteristic of modern mobile UIs, and full-circle 50% for avatars.

Limitations are minor. Negative values clamp to zero; there is no built-in syntax for inset (concave) corners. Achieving inset corners requires SVG, mask-image, or clip-path, none of which are border-radius. When two adjacent radii sum to more than the side length, browsers proportionally scale them down so they fit, per the CSS Backgrounds and Borders Module Level 3 spec. This is not a bug; the alternative would produce overlapping curves. Rendering quality at high zoom levels depends on the browser; Chromium-based browsers tessellate corners with enough segments to look smooth at any zoom, while older Safari versions occasionally show faceting at extreme magnifications.

The generator emits a live preview alongside the property string so the visual effect is immediate. Copy-paste of the generated CSS works in any modern stylesheet; for inline style attributes, the same value works without modification.