Try 6px corners

4px feels sharp, 8px bubbly. 6px is a calm default for dense product UI.

Brian Lovin@brian_lovin
It truly pains me to say this, but 6px is the most underrated corner radius. 4 can feel too sharp and technical, 8 too loose and bubbly.
Feb 5, 2022View on X ↗
Brian Lovin@brian_lovin
After you update to macOS Big Sur you’re not allowed to use any corner radius lower than 10px, just a heads up.
Jul 10, 2020View on X ↗

The second post is a joke, but it names the pull toward ever rounder corners.

Bad pane

1 · Small controls, small corners

Switch the bad pane between 4, 8 and 10px. Good stays at 6.

10px: bubblyBad
--radius: 10px
6px: calmGood
--radius: 6px
:root {
  --radius: 6px;                          /* buttons, inputs, chips, rows */
  --radius-card: calc(var(--radius) + 4px); /* one step up for containers */
}
.button, .input, .chip { border-radius: var(--radius); }
.badge { border-radius: calc(var(--radius) - 2px); }

2 · Nest it: outer = inner + gap

Move through the menu, then drag the padding slider.

Same radius twiceBad
outer 12 · inner 12
Concentric cornersGood
outer 6 + 6 = 12 · inner 6
.menu {
  --inner: 6px;
  --pad: 6px;
  padding: var(--pad);
  border-radius: calc(var(--inner) + var(--pad)); /* curves share one centre */
}
.menu-item { border-radius: var(--inner); }

Why it matters, pros and cons

Why it matters

Radius sets the tone of every control at once. On a 32px button, 2px either way is the difference between precise and soft.

Pros

  • Dense tables, inputs and chips stay crisp without feeling harsh.
  • One token, stepped up for containers, keeps every level consistent.
  • Concentric nesting makes menus and cards look machined.

Cons

  • Marketing and consumer apps may want the friendlier 8–12px.
  • Platform UI (macOS, iOS) sets its own radii; match the platform.
  • It's a default to start from, not a law.