Round corners in px or percent, circular or elliptical, and see the radius the browser will actually paint after the CSS overlap rule scales it down
Initializing in your browser…
Generate fake data that is the thing it is labelled: card numbers with a real Luhn check digit, IBANs that pass ISO 7064 MOD 97-10, UUID v4 and v7 per RFC 9562, reserved e-mail and IP ranges, a seed so the same data comes back, and JSON, NDJSON, CSV or SQL output
Build a clip-path from polygons, circles, ellipses and rounded insets, with the fill rule exposed and the value checked before it is shown
Stack CSS box shadows with any colour notation, and never write a declaration the browser will drop: a layer that will not parse is left out and flagged rather than taking every other layer down with it
A Pill preset applied to a 200 by 100 box. The CSS says 9999px. The question is what the browser actually paints, which is a different number.
Written
border-radius: 9999px; on a 200 x 100 box
What the browser paints
CSS Backgrounds 3 section 5.5, "Overlapping curves": for each side, f = L / S (side length over the sum of its two radii) top: 200 / 19998 = 0.010 right: 100 / 19998 = 0.005 scale factor = the smallest of the four = 0.005 every corner painted at 9999 x 0.005 = 50.0 px Confirmed with document.elementFromPoint against the rendered box: centre painted left edge mid painted top left corner NOT painted top right corner NOT painted
When two radii on a side add up to more than that side, the browser scales EVERY radius on the box by the same factor, not just the two that overlapped. So one oversized corner quietly shrinks the other three, and a 9999 pixel pill is painted at exactly half the shorter side. Nothing in the declaration says so, which is why the panel under the preview computes it and shows the figure each corner will really have. The shorthand itself was checked against the browser's own expansion over six cases and was already correct in all six.
Set the four corners, in pixels or percent, circular or elliptical, and get the shortest shorthand that means exactly that. Underneath it, the radius the browser will actually paint: CSS scales every radius on a box down when two of them overlap, and that is usually the difference between the preview and the real page.
The shorthand is the easy half. `border-radius: 10px 20px 30px 40px` sets the four corners clockwise from the top left; three values set the top left, then the top right together with the bottom left, then the bottom right; two set the two diagonals; one sets all four. This tool writes the shortest form that means exactly the corners you set, and every shorthand it produces was expanded by the browser's own parser and compared with the corners asked for.
The hard half is section 5.5 of CSS Backgrounds 3, which almost no generator mentions and which is the reason a preview and a real page can disagree. If two radii on the same side of the box add up to more than that side's length, the browser scales EVERY radius on the box by the same factor. Not just the two that overlapped: all of them, together. So `border-radius: 9999px` on a 200 by 100 box does not give you a 9999 pixel corner. It gives you 50, because the factor is 100 divided by 19,998, and nothing in the declaration says so. One oversized corner also quietly shrinks the other three. This tool computes that factor and shows the radius each corner will actually be painted with, in pixels, for the box size on screen, and says when scaling has happened.
It also writes elliptical corners, which the previous version could not do at all. The full syntax takes a second list after a slash: `border-radius: 50% / 20%` gives corners that are 50 percent of the width across and 20 percent of the height down, which curve away far faster horizontally than vertically. That is where organic blob shapes come from, and where a squircle comes from, and it is not expressible with a single list of four values.
A percentage is measured against the width horizontally and the height vertically, so 50 percent on every corner is a circle only when the box is square and an ellipse otherwise. The width and height sliders are there so that can be seen rather than described.
Everything arriving from a shared link is range checked. The previous version parsed the URL parameter as JSON and used whatever came back as long as `topLeft` was defined, so a link carrying `{"topLeft":12}` wrote `12px undefinedpx undefinedpx` and the browser dropped the declaration, leaving a square box and no explanation. Measured over four URL values, three did that.
The claim that the shorthand itself was wrong was checked and did NOT hold: six shorthand cases were expanded by the browser on 2026-09-04 and all six gave exactly the corners that were asked for. That half was already right, and this pass left it alone.
Apply the Pill preset on a 200 by 100 box. The CSS says 9999px, and the panel underneath says the browser will paint 50px on every corner after scaling everything by 0.100.
Switch the unit to percent, turn on Elliptical and pick Squircle. The value becomes `50% / 20%`, which on a 200 by 200 box is a corner 100 pixels across and 40 pixels down.
A consistent corner radius across a design system, with the shortest shorthand to paste.
A very large radius gives a pill at any height without recalculating it, and the panel shows what the browser actually uses.
Elliptical corners with different values on each corner are what make a shape look hand drawn rather than geometric.
The Left Only and Right Only presets are the two ends of a segmented control, with square corners where the pieces meet.
Because CSS will not let two radii on the same side add up to more than that side. When they do, the browser scales every radius on the box by the same factor, so 9999px on a 200 by 100 box is painted as 50px. The panel under the preview shows the factor and the resulting radius for each corner.
It separates the horizontal radii from the vertical ones. `50% / 20%` means every corner is half the width across and a fifth of the height down, which is an ellipse rather than a circle. Turn on Elliptical to write it.
Because a percentage is measured against the width horizontally and the height vertically. On a square box those are the same and you get a circle; on any other box you get an ellipse. Change the width and height sliders to see it happen.
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Three values set the top-left, then the top-right and bottom-left together, then the bottom-right. Two set the two diagonals. One sets all four.
No, and a negative value makes the whole declaration invalid, so the browser paints square corners with no error. Anything negative arriving from a shared link is clamped to zero here.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.