Border Radius Generator

Border Radius Generator writes one CSS declaration and nothing else. Three modes cover the usual work: a single radius applied to every corner, four separate corner values in px, rem or percent, and an elliptical mode with eight percentage sliders that gives each corner its own horizontal and vertical arc. The four corners are then collapsed to the shortest form that still means the same thing, so four identical values come back as 12px rather than repeated, and in the uniform and per-corner modes a zero is written as a bare 0 with no unit. That collapse works on one half of the value at a time, so an elliptical run whose eight sliders happen to agree keeps its slash and reads 50% / 50% where plain 50% would have done.

The elliptical mode is the one worth understanding. Splitting the value across a slash sets the horizontal radius of all four corners before it and the vertical radius after, and pushing those eight sliders apart is how the soft, lopsided blob shapes are made. It is also as close as this gets to a squircle, and that gap is worth naming: a CSS corner is an elliptical arc, so what you produce here approximates a superellipse rather than drawing one. Apple's continuous corner curve is an SVG path or the newer corner-shape property, not something a border-radius value can express.

Everything is worked out by this page inside your own browser. There is no file and nothing is transmitted, because the input to this tool is a set of controls rather than an upload. Two habits of the interface are worth knowing in advance. Pasting a value into the input box takes over the run: the declaration you paste is parsed, checked and tidied, and the sliders are ignored for that pass, so the box is for cleaning up a value you already have rather than for seeding the controls. And the preview redraws when you press Run, not while you drag — the number beside a slider follows your finger, the shape does not.

Percentages need one more caution, because they resolve against the box rather than against a fixed size. The preview is a 220 by 220 square, so 50% there is a circle, while the same 50% on a wide button is a stadium with stretched ends. The tool has no idea how large your element will be, so it does not warn you when two radii on one edge add up to more than the edge itself; browsers deal with that by scaling every radius down proportionally, which is why an oversized value flattens instead of breaking. Validation on a pasted value covers syntax alone: a radius wide enough to swallow the entire edge is still legal, so it is collapsed and handed back without comment.

Runs on your device. Your file is processed directly in this browser.