CSS border-radius generator

The full border-radius syntax

At its simplest, border-radius: 12px; applies the same radius to all four corners. But CSS supports a powerful longhand:

border-radius: 12px 24px 12px 24px;
/* top-left, top-right, bottom-right, bottom-left (clockwise from top-left) */

border-radius: 60% 40% 30% 70% / 30% 60% 40% 70%;
/* horizontal radii / vertical radii — blob shapes */

px, %, em: which to use when

• px: fixed, predictable radius. Great for buttons, cards, inputs. 8px is always 8px.
• %: radius relative to element size. 50% on a square gives a perfect circle. Useful for avatars and circular elements in general.
• em / rem: scales with font-size. Useful if your system uses a rhythmic unit (8px base, 16px, etc.).
• 9999px: common trick for "pill shape": an absurdly large radius that always reaches half the height, producing perfectly rounded ends regardless of element height.

What radius for what component

1. Inputs and buttons: 6-10px. Higher feels "childish"; lower feels "dated".
2. Cards: 12-16px. More generous than buttons to differentiate hierarchy.
3. Modals and popovers: 16-24px. Communicates that they're floating elements.
4. Avatars: 50% (circular) or 8px (square with soft corners, Telegram/Linear style).
5. Tags and badges: 9999px (pill) or 4-6px (rectangular).

Border-radius in design systems

Serious design systems define a radius scale, never arbitrary values: --radius-xs: 4px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;. Prevents components ending up with random radii that break consistency. Tailwind bakes this in with rounded-sm, rounded, rounded-lg, etc.

The blob shape trick

The border-radius: A% B% C% D% / E% F% G% H% syntax allows different horizontal and vertical radii. Asymmetric combinations produce organic shapes that became popular on SaaS landings. Example: 30% 70% 70% 30% / 30% 30% 70% 70%. Use sparingly: animated they're lovely; static and overused they feel arbitrary.

Border-radius on images and backgrounds

Works fine on <img> and background-image elements. Important: overflow: hidden on the container if you want to clip content that spills out (e.g. an image inside a card with rounded corners). For SVG, prefer clip-path over border-radius.