Border Radius
角丸はUIの印象を左右する重要な要素です。コンポーネントは6px（rounded-md）を基準に設計されています。
Radius Scale
シャープから完全な丸みまで、すべての角丸トークン
0px
rounded-noneシャープな角
2px
rounded-smわずかな丸み
4px
rounded-baseデフォルトの丸み
= rounded (DEFAULT)
6px
rounded-mdインプット、ボタン
8px
rounded-lgドロップダウン、コンテナ
12px
rounded-xlカード、モーダル
16px
rounded-2xlフィーチャーセクション
24px
rounded-3xlヒーロー要素
9999px
rounded-full円形、ピル型
| Token | Value | Preview | ユースケース |
|---|---|---|---|
rounded-none | 0px | シャープな角 | |
rounded-sm | 2px | わずかな丸み | |
rounded-base= rounded (DEFAULT) | 4px | デフォルトの丸み | |
rounded-md | 6px | インプット、ボタン | |
rounded-lg | 8px | ドロップダウン、コンテナ | |
rounded-xl | 12px | カード、モーダル | |
rounded-2xl | 16px | フィーチャーセクション | |
rounded-3xl | 24px | ヒーロー要素 | |
rounded-full | 9999px | 円形、ピル型 |
Visual Comparison
none
sm
base
md
lg
xl
2xl
Component Radius
要素の役割に応じた角丸の選び方
4px
小さい要素
控えめな丸みでテキストとの調和を保つ
Tag
roundedCode
rounded6px
インタラクティブ要素 基準
視覚的な安定感とクリック可能な印象
Button
rounded-mdInput
rounded-mdToggle
rounded-mdSelect
rounded-mdSegmented
rounded-mdDropdown
rounded-md8px
コンテナ要素
内部要素との階層感を表現
Tooltip
rounded-lgAlert
rounded-lg12px
大きい要素
柔らかく親しみやすい印象
Card
rounded-xlModal
rounded-xlPopover
rounded-xlfull
円形・ピル型要素
アイコン的な役割を持つ要素
Avatar
rounded-fullBadge
rounded-fullIndicator
rounded-fullNested Radius
角丸要素をネストする場合、視覚的な一貫性を維持するために、内側の角丸は外側の角丸からパディング分を引いた値にする必要があります。
inner=outer−padding間違った例
Content
outer: 24pxpadding: 12pxinner: 24px ✗
inner = outer を使用すると
角丸が平行にならず不自然
正しい例
Content
outer: 24pxpadding: 12pxinner: 12px ✓
inner = outer − padding
24px − 12px = 12px で自然な曲線
よく使うパターン
outer: 12px
padding: 8px
inner: 4px
outer: 16px
padding: 12px
inner: 4px
outer: 24px
padding: 16px
inner: 8px