自然なborder-radius値の決め方
border-radiusは要素のサイズに比例した値が最も自然です。小さなボタン(高さ32px)に20pxのborder-radiusを設定するとpillに近くなり、意図せず過剰に見えます。大きなカード(高さ300px)に4pxだけでは角丸がほとんど見えません。
一般的な基準は要素の短い辺の5〜20%です。5%は少し丸く、10%は普通、20%は大きく丸い印象です。結果を4pxまたは8px単位に丸めるとデザイングリッドと合わせやすくなります。
pillとcircle形状
border-radius: 9999pxを使用すると、ブラウザが自動的に高さの半分の値を適用して完全なpill形状を作ります。手動計算は不要です。正方形の要素に50%を設定すると完全な円になります。
よくある質問
border-radiusはどのくらいが自然に見えますか？
短い辺の5〜20%が自然です。ボタンは4〜8px、カードは8〜16px、モーダルは16〜24pxが一般的です。
pill形状のボタンはどう作りますか？
border-radius: 9999pxを使用します。ブラウザが高さの半分を自動適用するので手動計算不要です。
iOSとAndroidのデフォルト角丸値は？
iOSはカードに12〜16pt、ボタンに10ptを使用。Material Design 3はshape token（4〜28dp）を使用します。