Tokens · Radius

Radius

--radius (0.5rem) を基点とする radius スケール。コントロールの多くは rounded-md / rounded-lg を使い、より大きなステップはマーケティング面に限定します。

Scale

rounded-none

0px

シャープな角 ── ほとんど使わない。

rounded-sm

calc(var(--radius) - 4px) ≈ 4px

小さい chip、密度の高いリスト項目。

rounded

4px

コードバッジ、インラインの pill。

rounded-md

calc(var(--radius) - 2px) ≈ 6px

Button / Input / Badge のデフォルト。

rounded-lg

var(--radius) — 8px

Card、ダイアログ、Popover。

rounded-xl

12px

マーケティング面、ヒーロー CTA。

rounded-2xl

16px

色のストーリーのスウォッチ、価格カード。

rounded-full

9999px

Avatar、ステータスドット、Tag。

ベース radius 変数

--radius: 0.5rem; /* 8px */

Tailwind のいくつかのエイリアスがこの値から派生します：rounded-md = calc(var(--radius) - 2px)、 rounded-sm = calc(var(--radius) - 4px)。 --radius を変更すれば、システム全体の角丸が一斉に追従します。