角の形状

角の形状は、ボタンやカードなどのコンポーネントに適用する事によって画面の中で視覚的な抑揚を生み出し、コンポーネントの機能理解を促進したり任意のコンテンツを認知しやすくさせる事ができます。

ベース値は --radius: 0.625rem (10px) で、CSS 変数として定義されています。各スケールはこのベース値への乗数で計算されます。

None

rounded-none

0px

rounded-sm

≈ 0.375rem

rounded-md

≈ 0.5rem

rounded-lg

0.625rem (base)

rounded-xl

≈ 0.875rem

2XL

rounded-2xl

≈ 1.125rem

3XL

rounded-3xl

≈ 1.375rem

Full

rounded-full

9999px

スケール一覧

クラス	CSS 変数	値	主な用途
`rounded-none`	—	0	テーブル、セパレーター
`rounded-sm`	`--radius-sm`	≈ 0.375rem (6px)	バッジ、タグ
`rounded-md`	`--radius-md`	≈ 0.5rem (8px)	入力フィールド、小ボタン
`rounded-lg`	`--radius-lg`	0.625rem (10px)	カード、標準ボタン
`rounded-xl`	`--radius-xl`	≈ 0.875rem (14px)	モーダル、シート
`rounded-2xl`	`--radius-2xl`	≈ 1.125rem (18px)	大きなカード
`rounded-3xl`	`--radius-3xl`	≈ 1.375rem (22px)	ヒーローカード
`rounded-full`	—	9999px	アバター、ピル型バッジ

ベース値 --radius を変更すると、sm〜3xl のすべてのスケールが追従します。

/* globals.css */
:root {
  --radius: 0.625rem; /* 変更するとすべてのスケールに反映 */
}

/* Tailwind theme */
--radius-sm: calc(var(--radius) * 0.6);
--radius-xl: calc(var(--radius) * 1.4);

On This Page