結論

プロは角丸を「半径スケールのトークン化」と「ネスト時の同心円補正」の2軸で必ず統一する。None/XS/S/M/L/XL/Full の意味的トークン（M3: 4/8/12/16/28dp）にpx直書きを禁止して固定し、入れ子では黄金式「内側半径 = 外側半径 − padding」を calc() で動的に導出して中心点を共有させる。数式は出発点であり、最後は必ず目視で微調整する——この2軸を守るだけで「素人っぽさ」のほとんどが消える。

01 — px直書きをやめ、半径スケールにトークン化する

6px・10px・14px と現場ごとに目分量で打つと、画面全体で半径が不揃いになり安っぽく見え、後から一括変更もできない。None=0 / XS=2 / S=4 / M=8 / L=12 / XL=16 / Full=9999px の7段に固定し、すべてトークン参照に統一する。M3 の 4/8/12/16/28dp と整合させるのが鉄板。

6
11
3
14
9
17
✗ 6/11/3/14/9/17px とバラバラ → 不揃いで安っぽい
0
2
4
8
12
16
✓ 0/2/4/8/12/16 の意味的スケール → リズムが揃う

primaryShape – Material Design 3

primaryOverview of Border Radius – Telerik Design System Kit

blogBuilding a consistent corner radius system in UI – Bootcamp

02 — ネストは黄金式「内側 = 外側 − padding」で同心円にする

丸い親の中に丸い子を入れるとき、親子で同じ半径を使うのは最大の地雷だ。半径が同じでも弧の中心点が違うため平行にならず、角の隙間だけ太く膨らんで（bulge）見える。内側半径 = 外側半径 − padding で中心を共有させれば、弧が平行になり同心円に整う。下は外36px・padding20pxのカード。内側を 36 − 20 = 16px に落とすだけで角の膨らみが消える。

✗ 内も外も36px → 角の隙間だけ膨らんで素人っぽい
✓ 内側 36−20=16px → 弧が平行で同心円に整う

blogThe Math Behind Nesting Rounded Corners – Cloud Four

blogNested rounded corners – Ondřej Konečný

blogCareful With Your Nested Border-Radii – CSS-Tricks

03 — 内側半径は calc() で自動導出して保守可能にする

数式を手計算でハードコードすると、paddingを変えた瞬間に同心円が崩れる。親に --outer-radius と --pad を定義し、子の border-radius を calc(var(--outer-radius) - var(--pad)) で算出すれば、paddingを変えても内側半径が連動して破綻しない。下は両方とも外側24pxの同一カード。paddingだけ 8px → 16px に変えても、子のサムネは自動で同心円を保つ。

pad 8 → 内16
✓ pad 8px：calc(24−8)=16px が自動算出
pad 16 → 内8
✓ pad 16px：同じ式で calc(24−16)=8px に連動

blogThe Classic Border Radius Advice, Plus an Unusual Trick – Frontend Masters

blogConcentric Radius: Nested Corners Done Right – PV21Design

04 — 半径は要素サイズに比例させる

同じ16pxでも、32pxのチップではほぼピル化し、400pxのカードではほぼ直角に見える。固定pxを全要素に当てると知覚がチグハグになる。小さい要素ほど相対的に大きい半径（チップは Full でピル化）、大きい要素はトークン上位でも控えめに段を選ぶ。

chip 16px
card 16px
✗ 一律16px → チップは角ばり、カードはほぼ直角
chip Full
card 12px
✓ チップはFullでピル、カードは控えめ → 知覚が揃う

blogBorder Radius Rules Every Designer Must Know (2026) – 92learns

05 — マイナス半径は max() でクランプする

paddingが外側半径を超えると、内側半径が負になりブラウザは0扱いにする。補正せず放置すると角だけ直角になり破綻する。max(4px, calc(...)) で最小値を保証し、角の丸みを残す。下は外20px・padding28pxで内側が −8px に振り切れたケース。

✗ 20−28=−8px を放置 → 内側だけ直角で破綻
✓ max(4px, −8px)=4px → 最小の丸みを保証

blogCareful With Your Nested Border-Radii – CSS-Tricks

blogThe Classic Border Radius Advice, Plus an Unusual Trick – Frontend Masters

06 — 用途でトーンを使い分け、一律適用を避ける

ボタンもカードも区切り線も同じ角丸にすると、全部が混ざってのっぺりし階層が消える。直角は技術的/権威（ダッシュボード・エディトリアル）、2-4pxはB2B/銀行、8-12pxはEC/一般アプリ、16-24pxは消費者向け/ウェルネスと、プロダクトのトーンで丸み量を選ぶ。

全部 10px 一律
✗ 全UIに同じ角丸 → 階層もトーンも消える
0 技術
4 B2B
10 EC
20 消費者
✓ トーンで丸み量を選ぶ → 性格が立つ

blogBorder Radius Rules Every Designer Must Know (2026) – 92learns

実装スニペット

角丸トークン（px直書きを禁止し、全箇所でこのトークンを参照）。M3 の 4/8/12/16/28dp と整合させる。

:root{
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;    /* card / input / button */
  --radius-l: 12px;   /* large card / modal */
  --radius-xl: 16px;
  --radius-full: 9999px; /* pill / avatar */
}

ネストの同心円化を calc() で自動導出。親のpaddingを変えても内側半径が連動する（代表例: 外24 − pad8 = 内16）。

.card{
  --pad: 8px;
  --outer-radius: var(--radius-xl); /* 16px */
  padding: var(--pad);
  border-radius: var(--outer-radius);
}
.card > .thumb{
  /* 16 - 8 = 8px → 同心円 */
  border-radius: calc(var(--outer-radius) - var(--pad));
}

padが半径を超えても内側を負にしないクランプ。max() で最小4pxを保証（0で良ければ max(0px, ...)）。枠線がある box では inner = radius − padding − border まで引く。

.nested{
  border-radius: max(
    4px,
    calc(var(--outer-radius) - var(--pad))
  );
}

子に半径を付けず、親のクリップで同心円を実現する代替手法（2026時点でクロスブラウザ未成熟、フォールバック併用推奨）。

.card{
  border-radius: var(--radius-xl);
  overflow: clip;
  overflow-clip-margin: content-box;
}
/* 子は border-radius 不要 */

チェックリスト

  • border-radius に px を直書きしていないか。すべて半径トークン（--radius-*）参照になっているか
  • 半径スケールは None/XS/S/M/L/XL/Full の1本に統一され、画面全体で揃っているか
  • 丸い親の中の丸い子に、親と同じ半径を使っていないか（角が膨らんでいないか）
  • ネストの内側半径は calc(外側 − padding) で導出し、paddingを変えても連動するか
  • padが半径を超える箇所で内側半径が負（=直角化）になっていないか。max(4px, …) でクランプしたか
  • 枠線のある box では inner = radius − padding − border まで引いているか
  • チップ/ボタンとカード/モーダルで、サイズに応じて半径の段を選んでいるか（固定px当てはめになっていないか）
  • プロダクトのトーン（技術系=0 / B2B=2-4 / EC=8-12 / 消費者=16-24）に合った丸み量か。全要素一律になっていないか
  • 数式適用後に角を目視で確認し、違和感があれば微調整したか

限界 / 出典

黄金式 inner = outer − padding と calc() 実装は Cloud Four / CSS-Tricks / Frontend Masters / Konečný / PV21 の5ソースで一致しており高確度。M3スケール（4/8/12/16/28dp）と Telerik（0.25rem倍数）は一次ソースで確実。一方「用途別の角丸量（0px=技術系, 8-12px=EC 等）」と「要素サイズ比例」は単一ブログ（92learns）由来の主観的傾向であり規範ではない（中確度）。XS=2px などの細値はソース間で揺れがある（M3はXS=4dp始まり）ため、自プロジェクトでスケールを一本化して採用すること。枠線込みの拡張式 inner = radius − padding − border は box に枠線がある時のみ必要。overflow:clip 代替と Apple ConcentricRectangle（WWDC 2025）/ Sketch の corner 'auto' は2025-2026の新潮流だが、クロスブラウザ/プラットフォーム制約があるため、Web本番では calc() 手法を主、新手法を実験扱いにする。全ソース共通で「数式は出発点、最終は目視微調整」と明記されている点に留意。

blogThe Math Behind Nesting Rounded Corners – Cloud Four

blogCareful With Your Nested Border-Radii – CSS-Tricks

blogThe Classic Border Radius Advice, Plus an Unusual Trick – Frontend Masters

blogNested rounded corners – Ondřej Konečný

primaryShape – Material Design 3

primaryOverview of Border Radius – Telerik Design System Kit

blogBorder Radius Rules Every Designer Must Know (2026) – 92learns

blogBuilding a consistent corner radius system in UI – Bootcamp

blogConcentric Radius: Nested Corners Done Right – PV21Design