How to choose border radius values

Border radius is one of the most under-considered design decisions on the web. Pick 4px and your UI feels corporate; pick 16px and it feels friendly; pick 9999px and you’re making pills. The shape of corners sets tone before a user reads a single word. This guide covers how to choose radii consistently across a product, the relationship between element size and radius, nested radius rules, advanced values like squircles and superellipses, and the scales used by well-known design systems.

What border radius signals

0px (sharp): formal, technical, efficient. Government forms, tabular data, terminal UIs, financial software.

2-4px (subtle): professional, unobtrusive. Classic Bootstrap era; still common in enterprise SaaS.

6-12px (friendly): modern consumer apps. Most SaaS in 2024-2026. GitHub, Linear, Stripe, Notion all sit in this range.

16-24px (soft): playful, approachable. Consumer products targeting casual users. Duolingo, recent Google products, Spotify.

9999px (pill): badges, status chips, primary CTA buttons. Reads as “distinct action” — use sparingly.

50%: circles — avatars, dot indicators, icon buttons. On a square element, border-radius: 50%produces a circle.

Radius scales — what design systems use

Tailwind: sm (0.125rem / 2px), default (0.25rem / 4px), md (0.375rem / 6px), lg (0.5rem / 8px), xl (0.75rem / 12px), 2xl (1rem / 16px), 3xl (1.5rem / 24px), full (9999px). Good general-purpose scale.

Radix Themes: 6-step scale (0-6), each with a distinct role and consistent nesting behavior.

Material Design 3: tokens based on shape families (none, extra-small, small, medium, large, extra-large, full). Different components default to different radii.

Don’t invent new values per component. Pick 4-6 steps, apply across the whole UI.

Element size affects perceived radius

A 4px radius on a 32px button looks proportionally different from a 4px radius on a 400px card.

Rule of thumb: radius should roughly scale with element size. Small elements get small radii; large cards get larger radii. But not linearly — the relationship is more logarithmic.

Practical scale:

Inputs and buttons (32-40px tall): 4-8px radius.

Cards (100-300px wide): 8-16px radius.

Hero sections or full-width panels: 16-24px radius.

Avatars and icon buttons: 50% (circle).

Nested border-radius — the math

When one rounded element sits inside another, the inner radius must be smaller than the outer radius for them to look concentric.

Formula: inner radius = outer radius − gap.

Example: card has 16px radius and 12px padding. Inner element should have 16 - 12 = 4px radius for aligned curves.

Why it matters: if both use 16px, the inner element’s corner sits awkwardly inside the outer corner — the “crescent moon” look that reads as broken.

Apple’s concentric corners: the Apple design philosophy explicitly applies this rule across hardware and software — iPhone screen corners are mathematically derived to match the device bezel.

Squircles and superellipses — the next step

Standard border-radius creates a quarter-circle at each corner. Apple-style “squircles” use a smoother shape (superellipse) that transitions more gradually — the curve spreads across more of the side.

CSS native: not directly supported as a single property. Workarounds:

border-radius: 20% / 50%; — elliptical corners, gives a slightly different feel than circular.

SVG or Canvas: draw the shape with M/L/C bezier curves for true superellipses.

Modern proposal: corner-shape: superellipse is under discussion for CSS. Not shipping in browsers yet as of 2026.

For most UIs, the visual difference between 12px circular radius and a 12px squircle is subtle — viewers perceive smoothness without noticing the math. Only visible at large sizes.

Individual corner control

Radius can be set per corner for asymmetric shapes.

border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 0; border-bottom-left-radius: 0;

Shorthand: border-radius: 12px 12px 0 0 (TL, TR, BR, BL — clockwise from top-left).

Common patterns:

Tabs attached to a panel: rounded top corners, sharp bottom.

Chat bubbles: one sharp corner near the sender (top-left for them, top-right or bottom-right for you) to indicate source.

Cards in a list: rounded only at outer edges (first item top- rounded, last item bottom-rounded, middle items sharp).

Elliptical corners

Two values separated by a slash create elliptical corners (different x and y radii):

border-radius: 50px / 20px; — wide, short oval corners. Used for “blob” shapes, banners, or unique card styles.

Use cases: splashy marketing hero sections, banner cards with distinctive shape. Not for standard UI components — elliptical corners read as decorative, not neutral.

Border radius and performance

Box-shadow + rounded corners: expensive to render when stacked densely (many cards). Browsers are optimized for this case but high-end phones still show jank on large lists.

Rounded corners on images:overflow: hidden on the container with border-radius is the standard approach. Performant.

Animating border-radius: acceptable for small changes (a pill growing). Avoid large animated shape morphs — use SVG or a CSS mask instead.

Common mistakes

Using too many radius values. If you have buttons at 4px, 6px, 8px, 10px, and 12px, the inconsistency reads as sloppy. Pick 3-6 values, use them throughout.

Mixing radius styles. Some components sharp, others very round, with no clear reason — looks like multiple designers fought.

Non-concentric nested corners. Child with same radius as parent. Subtract the padding.

Pills for every button. Pill-shaped (border-radius: 9999px) reads as prominent and urgent. Using it for every button removes the emphasis. Save it for primary CTAs.

Rounding inputs but not their container.Inputs with 8px radius inside a card with 4px radius — looks wrong. Align corner styles across related components.

Run the numbers

Tune individual corner values with the border radius generator. Pair with the box shadow generator to match shadow softness to corner rounding, and the aspect ratio calculator when sizing cards to a consistent shape across breakpoints.