How to Round Corners and Build CSS Blob Shapes

Border-radius generator opens in Simple mode with a sensible default radius already applied to the preview box. A mode switch at the top swaps between Simple (precise, per-corner control) and Blob (organic, randomized shapes) - each mode remembers its own settings, so switching back and forth loses nothing.

Simple mode: rectangle, pill, or circle

"Link all corners" is checked by default - one slider sets every corner to the same percentage, and the output collapses to the short form, border-radius: N%;. Unchecking it swaps in four independent sliders, one per corner in CSS's own order (top-left, top-right, bottom-right, bottom-left), producing border-radius: TL% TR% BR% BL%; - though if all four end up equal anyway, the output automatically falls back to the short single-value form rather than emitting a needlessly repetitive four-number line.

Two common shapes fall directly out of this: a perfect circle on a square box needs every corner at 100% (a circle is just a square whose corners are rounded all the way to its centre), but the same 100% on a wider-than-tall box gives an ellipse, not a pill, because a percentage radius is measured against each axis separately. A pill/stadium needs a pixel radius of at least half the box's height - switch Units to px and push the slider up.

Blob mode: an organic shape without hand-tuning eight numbers

One control, Smoothness (0-100%), decides how far the randomizer is allowed to stray from a perfectly even 50% on each of the shape's eight numbers. At the low end the spread stays tight - roughly a 35%-65% range per corner, close enough to even that the result is a gentle, barely-organic wobble. At the high end the spread widens all the way to roughly 5%-95%, producing a far more extreme, obviously asymmetric shape. "Randomize" generates a brand-new set of eight numbers at the current smoothness every time it's clicked - there's no memory of the previous roll, so clicking it repeatedly is a legitimate way to browse several shapes quickly rather than committing to the first one.

Moving the Smoothness slider on its own doesn't reshuffle the shape currently showing - it only changes the range the next click of Randomize will draw from. Adjusting Smoothness first and then clicking Randomize, rather than expecting the shape on screen to update as the slider moves, is the actual order the two controls work in.

The output in this mode is the full elliptical-corner shorthand: four horizontal radii, a slash, then four vertical radii - border-radius: H1% H2% H3% H4% / V1% V2% V3% V4%; - the exact syntax that lets each corner curve differently on its horizontal and vertical axis, which is what makes the shape read as organic rather than just "rounded unevenly."

Copying and using the result

The output block updates live as either mode's controls change, inside an aria-live="polite" region so the new value is announced without interrupting whatever else is happening on the page. "Copy CSS" puts the exact border-radius declaration on the clipboard, ready to paste directly into a stylesheet - in either mode's syntax, already correctly formatted, no manual cleanup needed.

What the preview box's own shape tells you

Percentage values (Blob mode, and Simple mode with Units set to %) are relative to the preview box's own width and height, not to a fixed pixel radius - which is exactly why the same 100% setting produces a circle on a square preview and an ellipse on a wider one, and why trying a shape here first, against a box close to the real element's proportions, is worth doing before copying the CSS onto a differently-shaped element on the actual page and being surprised the result looks different. The mode switch itself is a real keyboard-operable radio group, not a pair of plain buttons, so arrow keys move between Simple and Blob the same way native radio inputs behave, and the currently active mode is always announced to a screen reader through its own aria-checked state, not implied by colour alone.

Everything runs as plain CSS-string generation, live, in your browser - nothing uploaded, no file involved.