CSS Border Radius Generator

Build a corner shape in three steps

1. Set box width and height from 1 to 2000 CSS pixels. Enter each corner’s horizontal and vertical radius in px or %, or apply the top-left pair to all corners.
2. Inspect the fit preview. Horizontal percentages use box width, vertical percentages use height; changing a unit keeps the number and changes its meaning.
3. Choose Radius only or Box CSS and copy the complete displayed result. If Copy is unavailable, select the readonly text. Invalid fields have no current CSS result.

Read the two radii at each corner

A corner has a horizontal and a vertical radius. The slash in border-radius separates four horizontal values from four vertical values, both ordered top-left, top-right, bottom-right, bottom-left.

Percentages use different bases: width for horizontal radii and height for vertical radii. On a rectangular box, 50% in both directions makes an ellipse, not necessarily a circle. A zero component makes that corner square.

When adjacent radii overlap an edge, the browser scales all eight components by one common factor. The method shows resolved and used pixels for this preview box; those rounded explanations do not replace authored CSS.

The preview lays out your declared box before fitting the whole shape into the available space. Radius-only CSS can behave differently on a differently sized receiving box. Box CSS also supplies dimensions, border-box sizing, zero border and zero padding; preview colors are not included.

Useful mixed-unit examples

On a 240 by 120 box, horizontal values 75%, 120px, 20%, 30px and vertical values 40px, 60%, 60px, 50% produce a common factor of 0.8. The top horizontal radii become 144px and 96px, while every other component is scaled too.

Keep those authored values but change the box to 120 by 240. The limiting factor becomes 4/7, so the used shape changes without rewriting your percentages into fixed pixels.

A 240 by 120 box with 50% horizontal and vertical radii uses 120px and 60px. All zero radii instead leave square corners; neither case needs a separate image editor.

Scope and interpretation

This numeric editor supports nonnegative px radii up to 4000 and percentages up to 1000, with at most three decimal places. It does not parse arbitrary CSS, calc(), var(), logical corners or other units.

Use one decimal point or comma, without grouping separators. A unit change keeps the entered number, not the old resolved length. Blank, partial, out-of-range or otherwise invalid fields disable the current preview and Copy instead of showing stale CSS.

Used-pixel and factor displays are rounded explanations for the declared preview box. Native rendering can use subpixel rounding; copied CSS retains your canonical authored values and units.

The fit percentage changes only how the preview is displayed. It does not change the logical box or the exported rule. On another box, percentages and overlap scaling are recalculated by that browser.

Border radius shapes a background or border; it does not universally clip children or make a complete component. This tool adds no uploaded image, drag editor, animation, layout framework or overflow rule.

Local styling without saved drafts

The tool adds no upload, saved history, input-bearing link or request containing your settings. Clipboard access is explicit. Existing site services, browser extensions and copies you keep are outside any universal privacy or erasure promise.