ボーダーラディウス値のrem変換（2pxから16px）

ボーダーラディウス：pxからrem

ボーダーラディウスは要素の角の丸みを制御します。一般的な値の変換表を紹介します：

変換テーブル

px	rem	Tailwindクラス	見た目
0	0	rounded-none	シャープな角
2	0.125	rounded-sm	わずかな丸み
4	0.25	rounded	軽い丸み
6	0.375	rounded-md	中程度の丸み
8	0.5	rounded-lg	目に見える丸み
12	0.75	rounded-xl	大きな丸み
16	1	rounded-2xl	非常に丸い
9999	-	rounded-full	ピル / 円形

border-radiusにremを使うべきか

議論の余地があります。各アプローチの主張：

remの場合：

• テキストサイズに比例して角が丸くなる
• カードやボタンがズーム時に視覚的バランスを維持
• 完全にremベースのデザインシステムとの一貫性

pxの場合：

• ボーダーラディウスは視覚的装飾でありコンテンツではない
• ユーザーはズーム時に角が変わることを一般的に期待しない
• 非常に小さなラディウス（1-2px）はremでサブピクセル値になりうる

フレームワークのアプローチ

• Tailwind CSS — すべてのrounded-*ユーティリティにremを使用
• Bootstrap — rem（デフォルトで0.375rem）を使用
• Material UI — px（デフォルト4px）を使用
• Ant Design — px（デフォルト6px）を使用

ピル型

ピル型のボタンやタグには非常に大きな値を使用：

.pill {
  border-radius: 9999px; /* 常にpx — remは不必要に複雑 */
}

ピル型の場合、値が要素の高さの半分を超えればよいだけなので、pxが普遍的に好まれます。

実用的な推奨

4px以上のborder-radius値にはremを使用してください。非常に小さなラディウス（1-2px）の場合、スケーリングの差異は知覚できないためpxで問題ありません。ピル型や円形には常に大きなpx値または50%を使用してください。