角丸

角丸は、ボタンやカードなどクリッカブルなものや情報整理のための背景として使用します。
高級感が損なわれるような大きい角丸の使用は避け、以下を用途に応じて使い分けます。

Name

CSS

rounded-sm

border-radius: 2px;

rounded

border-radius: 4px;

rounded-md

border-radius: 6px;

rounded-lg

border-radius: 10px;

rounded-full

border-radius: 9999px;

※チェックボックスは3pxを使用します。

rounded-sm（2px）

使用箇所：ラベル

rounded（4px）

使用箇所：クリッカブルな画像

rounded-md（6px）

使用箇所：カードUI、入力フォーム、セレクトボックス、ボタン、情報整理のための背景や吹き出し、モバイルブラウザの検索モジュール

rounded-lg（10px）

使用箇所：デスクトップブラウザの検索モジュール

rounded-full

使用箇所：連続して表示するボタン、円形、検索の選択済みタグ