Border Radius Generator

What this tool does

Border Radius Generator lets you set each of the four corner radii independently (or linked together for a uniform shape), with a live preview, producing the correct border-radius shorthand CSS for anything from a gently rounded card to an organic blob shape.

A uniform rounded-corner card is a one-value border-radius, but an organic, asymmetric "blob" shape (increasingly common in modern design) needs four independently tuned corner values, hard to dial in without a visual preview.

This tool lets you adjust each of the four corners independently or keep them linked for a uniform shape, previewing the result live and generating the correct border-radius shorthand (top-left, top-right, bottom-right, bottom-left order).

How to use Border Radius Generator

1. Keep "Link all corners" on for a uniform rounded rectangle, or turn it off for independent control.
2. Adjust each corner’s radius slider.
3. Review the live preview shape.
4. Copy the generated CSS.

Tips for better results

• The border-radius shorthand always lists corners in top-left, top-right, bottom-right, bottom-left order, clockwise starting from the top-left.
• For a classic organic "blob" look, try setting opposite corners to noticeably different values (a large top-left and bottom-right with smaller top-right and bottom-left, for instance).
• A radius value larger than half the element’s width or height simply caps at a fully rounded edge on that side, useful for creating a pill or fully circular shape from a square element.
• Linking all corners together is the simplest way to get a standard, uniform rounded-rectangle look, most UI cards and buttons use this rather than an asymmetric shape.

Common use cases

• Setting a card, button, or panel’s standard uniform corner rounding.
• Creating an organic, asymmetric blob shape for a decorative background element.
• Building a pill-shaped button or badge by setting a very large uniform radius.
• Experimenting with corner radius combinations before finalising a design system’s radius tokens.

Common mistakes to avoid

• Forgetting the shorthand’s corner order when manually editing the generated CSS, it’s always top-left, top-right, bottom-right, bottom-left, not some other rotation.
• Using wildly different corner radii on a standard UI card expecting it to look intentional; asymmetric radii read as organic/decorative, for standard interface elements a uniform radius usually looks cleaner.
• Setting an excessively large radius on a small element and being surprised the shape caps out at fully rounded rather than continuing to "grow" further.