CSS Border Radius Generator

Features

• Four corners, each adjustable, with a live preview
• px, rem and percent units
• Identical corners collapse to a single value — the way a person would write it
• Switch to percent and watch it become an ellipse
• Values are clamped: negatives become zero, anything huge stops at 999, so the CSS stays valid
• A copyable CSS rule below, with a `.rounded` selector
• Syntax-highlighted code with a one-click copy button
• Everything is computed in your browser; nothing is uploaded

How to use

1. Pick a unit (usually px or rem)
2. Set each of the four corners; the preview follows immediately
3. To see the percentage behaviour, switch the unit to % and note the ellipse
4. When it looks right, hit copy and take the CSS

FAQ

Why does 50% give me an ellipse rather than a circle?

Because a `border-radius` percentage is resolved per axis: a share of the element width horizontally and a share of its height vertically. When the box is not square the two radii differ and you get an ellipse. Two ways to a true circle: make the box square (equal width and height) and use `50%`, or use a pixel value larger than half the short side (`9999px`) and let the browser clamp it to half the short side — which also gives you a pill shape, and is the usual way to build one.

Which corner does each value refer to?

Starting at the top left and going clockwise: `border-radius: top-left top-right bottom-right bottom-left`. With three values it is "top-left, top-right-and-bottom-left, bottom-right"; with two it is "top-left-and-bottom-right, top-right-and-bottom-left"; one value applies to all four. This tool emits one value when all four match and four when they do not — matching CSS’s own shorthand so the output reads like something a person wrote.

Is `9999px` a safe way to build a pill button?

Yes, and it is common practice. The browser clamps a radius to half the short side, so however tall the button gets, `9999px` produces perfect semicircular ends. It is more robust than `50%`, whose shape changes with the aspect ratio (and can become an ellipse), whereas `9999px` is always a pill. The only cost is that the number looks odd.

Does border radius cost performance?

The radius itself, barely. One case is worth noting: putting a radius on an element that is being animated adds a clip step, which can drop frames on low-end devices. If the radius does not change during the animation, you can move it to a parent layer that does not repaint. Under GPU compositing a `border-radius` is cheap, and most projects need no structural change for it.