角丸
角丸は 6 段。部品が小さいほど角丸も小さく、面が大きいほど大きくする。中身より外側の角丸を大きくすると、入れ子にしたとき角が揃って見える。
角丸の一覧
6 段。デモの角丸は実寸。
rounded-xs 4px rounded-sm 6px rounded-md 8px rounded-lg 12px rounded-xl 16px rounded-2xl 20px | トークン | 値 | 主な用途 |
|---|---|---|
rounded-xs | 0.25rem（4px） | チェックボックス・バッジなど最小の部品 |
rounded-sm | 0.375rem（6px） | 小さなボタン・入力欄 |
rounded-md | 0.5rem（8px） | ボタン・入力欄の標準 |
rounded-lg | 0.75rem（12px） | カード・パネル |
rounded-xl | 1rem（16px） | ダイアログ・大きなカード |
rounded-2xl | 1.25rem（20px） | 最も大きな面（モーダルなど） |