Lazyweb

What corner radius do modern products use for primary buttons?

Fully-rounded pill buttons are the single largest bucket: 32.3% of 514 audited design systems use a 40+px (pill/full-round) primary button, and another 27.0% sit in the 7-12px 'rounded' range [1]. Sharp 0px corners are nearly extinct at 2.9% [1]. Rounded-to-pill is the modern default.

32% of 514 audited design systems use pill-shaped (40+px) primary buttons; only 3% use sharp 0px corners, July 2026.

By Ali Abouelatta · Lazyweb Research · n=514 · Published 2026-07-07 · Updated July 2026

designux-patternscheckoutsignupsaas
Robinhood Account Setup screen — real in-market example tracked by Lazyweb Research
Mimo Account Setup screen — real in-market example tracked by Lazyweb Research
Vinyls Search screen — real in-market example tracked by Lazyweb Research
Google Home Account Setup screen — real in-market example tracked by Lazyweb Research
Real in-market screens from Robinhood, Mimo, Vinyls, Google Home — tracked by Lazyweb Research
Share — The radius distribution
40+px (pill/full-round)40+px (pill/full-round): 32.3%32.3%7-12px (rounded)7-12px (rounded): 27.0%27.0%21-40px (large)21-40px (large): 18.3%18.3%1-6px (subtle)1-6px (subtle): 10.9%10.9%13-20px (very rounded)13-20px (very rounded): 8.6%8.6%0px (sharp)0px (sharp): 2.9%2.9%
Share — The radius distribution
ItemShare
40+px (pill/full-round)32.3%
7-12px (rounded)27.0%
21-40px (large)18.3%
1-6px (subtle)10.9%
13-20px (very rounded)8.6%
0px (sharp)2.9%

The radius distribution

Primary button corner radius, bucketed by the minimum button radius per system [1].

Radius bucketSystemsShare
40+px (pill/full-round)16632.3%
7-12px (rounded)13927.0%
21-40px (large)9418.3%
1-6px (subtle)5610.9%
13-20px (very rounded)448.6%
0px (sharp)152.9%

Round the two soft-corner extremes together — 40+px pill (32%) and 21-40px large (18%) — and half the corpus uses heavily rounded buttons [1].

How to apply it

Pick between two modern conventions: pill buttons (40+px) read as friendly, consumer and app-native; a moderate 7-12px radius reads as SaaS-professional and is the second-most-common choice [1]. Sharp 0px corners now signal 'dated' or a very specific brutalist/editorial intent and appear in only 3% of systems — use them deliberately, not by default [1].

Caveats

Radius uses the minimum value_px for button elements per system; 6 of 520 systems lack a button radius entry, giving the 514 denominator [1]. The '40+px' bucket is treated as full-round regardless of the exact stored value [1].

The numbers

StatComputed from
pill 40+ 32.3% (166), rounded 7-12 27.0% (139), sharp 0 2.9% (15) of 514button_corner_radius
Methodology. Universe: 514 audited design systems specifying a primary button radius, within the 520-system corpus. Method: bucket the minimum button radius per system. July 2026 snapshot; radius values are LLM-extracted tokens and 40+px is treated as full-round.

Sources & citations

  1. [1] Lazyweb Research analysis of 514 design systems (systems with a button radius), July 2026. Primary button corner radius bucketed by minimum button value_px per system; 514 of 520 systems specify one.

Source: Lazyweb Research — proprietary analysis of real, in-market app screens. Cite as Lazyweb Research, 2026-07-07.

Related questions

More in Design-system and theme benchmarks →

Explore the underlying screens, flows, and A/B tests inside Lazyweb. More research