Border Radius Generator

A border-radius declaration can take up to four independent corner values plus an optional eight-value slash syntax for organic curves — more moving parts than most people realize until they need something beyond a simple rounded card. This generator puts every one of those parts on screen: four corner sliders with their own px-or-percent unit, a link-all-corners shortcut for symmetric shapes, and a blob mode for shapes no single radius value can express.

Corners mode covers the shapes people actually reach for: link every corner to one slider for perfect circles, pills and squircles, or unlink them to round only the top of a dropdown panel or only one side of a card. A checkerboard preview behind the shape, switchable between a light and dark backdrop, makes it obvious exactly which corners get clipped away at any radius — the same visual trick file tools on this site use to show transparency.

Blob mode is the other half: the CSS eight-value slash syntax lets the horizontal and vertical radii of each corner disagree, which is what turns a rounded rectangle into an organic, irregular outline. Hit Randomize for a fresh shape any time and copy the exact CSS behind it — no SVG export or external library involved. Preset pages cover the requests people actually type into a search box: a perfect circle, a stadium-shaped pill button, an iOS-style squircle, and a ready-made organic blob.

Like every tool on this site, it runs entirely in your browser: no upload, no account, and the generator keeps working offline once the page has loaded.