Border Radius Generator

How it works

Four sliders, one per corner, each firing on input. With "link all corners" on, moving any slider copies its value to the other three before the CSS is rebuilt. The values are assembled into the shorthand in the order CSS actually uses, clockwise from top-left: top-left, top-right, bottom-right, bottom-left. That same string is written straight onto the preview box's style.borderRadius, so the preview isn't an approximation of the output, it literally is the CSS you copy, rendered by your own browser.

Two behaviors worth knowing that the sliders can't show you directly. First, this tool uses pixels, and pixels behave differently from percentages: border-radius: 50% on a rectangle resolves against each axis separately and gives you an ellipse, while a big pixel value like 9999px gives you the pill shape people usually wanted. Second, the spec clamps overlapping radii: when the radii on a side add up to more than that side's length, the browser scales all of them down proportionally. That's why cranking every slider to 100 on a small box eventually stops changing the shape, and it's also why you never need to compute "half the height" exactly for a pill; overshoot and the browser clamps it for you.

The whole tool is a few dozen lines of JavaScript running in this page. Slider values go from the DOM to the preview element and back to the output box without any network activity, which you can confirm in the DevTools Network tab.