Border Radius Generator
Set each corner (round or elliptical) in px, % or em, preview the shape, and copy the shortest correct border-radius shorthand plus the four longhands.
The border-radius CSS exactly as the spec collapses it (1–4 values, "/" for elliptical corners), a live preview drawn with the browser’s own overlap rule, and a note when radii overlap.
Example: Top-left 10px, top-right 20px, bottom-right 30px, bottom-left 20px collapses to "border-radius: 10px 20px 30px"; 200px on a 240 × 160 box shows the browser scaling every radius by 0.4.
Corners,
exactly as the spec collapses them.
How the shorthand is shortened, what elliptical corners mean, and why the preview sometimes shows smaller radii than you typed.
The shorthand
border-radius takes one to four values, top-left first and clockwise, with the margin-style omission rules (CSS Backgrounds and Borders 3 §4.3): one value when all match, two when opposite corners match, three when only top-right and bottom-left match, otherwise four. Elliptical corners add a "/" and a second list for the vertical radii, collapsed the same way; when every vertical radius equals its horizontal one the slash part is dropped. The four longhands are listed too.
Overlap
When adjacent radii add up to more than the side between them, the browser scales every radius by the same factor — the smallest ratio of a side to the sum of its two radii — so the curves never cross (§4.5). The preview draws that scaled shape and the page shows the factor; your CSS keeps the values you typed, which is what the browser will scale identically on the real element.
Units and the preview
Percentages are relative to the box's own width (horizontal radii) and height (vertical radii), so 50% on a non-square box is an ellipse, not a circle. em and rem are drawn at 16 px in the preview only — the CSS stays in em/rem and follows the real element's font size. The box size is yours and only affects the drawing. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
Last reviewed 20 September 2026. How results are checked: How we verify.