Border radius generator

What is a border radius generator?

It gives you sliders for the four corners of a box and writes the CSS. Round all four equally and you get a pill or a circle; round them differently and you get the blob shapes that turn up in hero sections and avatars.

This one adds the part the others leave out. CSS has a rule about what happens when the radii you asked for do not fit on the box, and it does something more surprising than clamping. The panel under the preview shows you the result of that rule as you drag.

Everything runs in your browser. Nothing is uploaded, and there is no account.

How to use the border radius generator

1. Set the box size. The width and height matter more than they look, because whether your radii fit depends entirely on them. A radius that is fine on a card is not fine on a button.
2. Drag the corners. Each corner has one slider by default. Switch on elliptical corners to give each one a separate horizontal and vertical radius — that is what the slash in the shorthand is for.
3. Read the panel, then copy. If the scale factor is below 1, the numbers shown struck through are what you asked for and the ones beside them are what gets drawn. The CSS block is the declaration itself, ready to paste.

The rule that changes corners you never touched

Suppose you have a 160 by 44 button with 8px on every corner, and you decide the top left should be a big 40px sweep. You change one value. What gets drawn is 36.7px on that corner — and 7.3px on the other three.

That is not a rounding artefact or a browser quirk. It is in the specification. CSS Backgrounds and Borders Level 3 says that when the two radii meeting on a side add up to more than the length of that side, you compute f as the smallest ratio of side length to radius sum across all four sides, and then, if f is less than 1, every corner radius on the element is multiplied by f. Not the offending corner. Every corner.

So the correction is global. Push one corner past what the box can hold and the whole shape shrinks in proportion, including corners you never edited and which were perfectly legal on their own. Once you know it, a lot of near-miss CSS makes sense.

The most familiar case is asking for a circle on something that is not square. Set 100px on all four corners of a 200 by 100 box and f comes out at exactly 0.5, so every corner draws at 50px — a stadium, not a circle. People usually explain this as the radius being capped at half the height. That description happens to give the right answer here, and it is the wrong rule: it is one factor applied to everything, which is why it also changes the corners on the long side.

The boundary is worth knowing precisely. The spec says the scaling applies only if f is less than 1, so a circle on a square — 50px on a 100 by 100 box — sits exactly on the line and is not scaled at all. One pixel more and f becomes 0.9901, and every corner starts shrinking. This tool follows the spec on that edge rather than rounding it away.

Honest limitations

The preview is a real element with a real border-radius, so what you see is your own browser drawing it — but the numbers in the panel are computed from the specification rather than read back from the browser. That is deliberate, because there is nothing to read back: the scaling happens when the box is painted, and the value a stylesheet reports is the one you set.

Everything here is in pixels. Percentages are legal in border-radius and resolve against the box's own width and height, which makes them the better choice for anything responsive, but they turn the question of whether your radii fit into one that changes with the viewport. If you use percentages, the same rule still applies; you just cannot see it in a fixed preview.

The tool models a plain box. Borders, padding and the difference between the outer and inner curve are not drawn: a real element with a thick border has a second, smaller radius on the inside edge, which the spec derives by subtracting the border width. That is a genuine part of border-radius and it is out of scope for a generator.

There is no squircle here, and there cannot be. The smoothly rounded shapes on Apple hardware are superellipses, a different curve family from the quarter ellipse CSS specifies, and no combination of border-radius values will reproduce one. Getting that look on the web needs a clip path or an SVG, and any tool claiming a squircle from border-radius alone is claiming something the property cannot do.

The engine carries 30 assertions. The load-bearing one is not a table of expected outputs but the property the rule exists to guarantee: over 20,000 random boxes, no side's two radii ever sum to more than that side's length after scaling — paired with a control confirming the same inputs do violate it beforehand, so the test cannot be satisfied by a function that scales everything to nothing. A deliberate sabotage that clamped each corner individually, which is what several generators do, fails that suite in four places.

Why is it free?

Four sliders and a division are work your own machine does instantly. Nothing is uploaded, there is no account, and there is nothing to watermark.

If you want colours rather than corners, the gradient generator and the colour converter on this site are next door, also without uploading anything.