CSS Border Radius Generator

It separates horizontal from vertical radii. border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% gives each corner an ellipse rather than a circle, and that asymmetry is what makes a blob.

Pixels give a fixed corner that stays the same as the element resizes. Percentages scale with the element, which is how you get a pill or a perfect circle from a square — and how you get blobs.

Not with border-radius alone; a true squircle is a superellipse. The Squircle-ish preset gets close with an even 30% radius on every corner, and the note below the controls explains the large-radius-plus-mask approximation if you need to go further.

When the radii along one side add up to more than the length of that side, the browser scales every radius on the element down by the same factor so the corners still meet. A 200px radius on a box 100px tall therefore renders as 50px. Percentages avoid the surprise because they are measured against the box itself.

Only with overflow: hidden on the same element. On its own, the radius rounds the background and the border but not the children, so a child image keeps its square corners and pokes through. Where there is a single child, putting the same radius on the image is the simpler fix.

Yes. There is no account, no daily cap, no file-size tier and no watermark, because there is no server cost to recover. The site is funded by clearly disclosed partner recommendations on the Partners page, never by metering the tools.

No. Everything is processed by JavaScript running in your browser, on your device. You can verify it: open your browser's developer tools, switch to the Network tab, and use the tool. You will see no request carrying your data — because there is nowhere for it to go.