角丸のborder-radiusはどれが最適か

はじめに

どんな幅、どんな高さになっても角丸が崩れないborder-radiusの書き方が複数あることを知り、どれが最適解なのかが気になったので調べました。
角丸といってもいろいろありますが、今回は以下のような、錠剤型のボタンによく見られる角丸を想定しています。

その場合によく見られる書き方として、以下の3つを取り上げます。

• border-radius: 100vmax
• border-radius: 999em
• border-radius: calc(infinity * 1px)

これらの共通点として、非常に大きい値を指定していることがあげられます。
border-radiusは、ある要素の高さと幅よりも大きい値を指定した場合、その要素の高さと幅のうち小さい方の数値の50%に自動的に調整されます。これらはその特徴を活かした実装方法となっています。

先に結論

どれが最適解なのかわかりませんでした。どれを選ぶかは好みなのかもしれません。個人的には、999emとcalc(infinity * 1px)は根拠がない値であるため、ブラウザの画面の大きさを表す100vmaxが一番望ましいのではと思っています。色々な方の意見が聞いてみたいです。

一応解説

ここで終わるのもどうかと思うので、ひとつずつ実装について解説します。

border-radius: 100vmax

vmaxは馴染みがない方も多いと思いますが、vwとvhの大きい方の値が入ります。（https://developer.mozilla.org/ja/docs/Web/CSS/length#vmax）
例えば、100vw = 1200px、100vh = 800px の場合の100vmaxは 1200px となります。
角丸にしたい要素はブラウザの中に収まっているはずであるため、100vmaxは必ず要素の寸法を超えます。よって、冒頭で説明したように、border-radiusが自動的に小さい方の辺の50%に調整され、どんな幅や高さでも崩れない角丸が実現できるというわけです。

border-radius: 999em

999em = 999 * 継承したフォントサイズ = それなりに大きい数値となるため、こちらも100vmaxと同じく自動的に小さい方の辺の 50% に調整され、崩れない角丸が実現できます。
ただ少し屁理屈を言うと、em = 1px の場合、999em = 999px なので、大きい画面に大きい角丸の要素を表示したら崩れるので完全ではないのかなと思っています。（が、emが 1px であることはほとんどないと思うので気にしなくて良いと思います。）

border-radius: calc(infinity * 1px)

こちらもinfinityという非常に大きい値を使うことで前述の2つと同じ理屈で角丸を実現するものです。

おまけ

「小さい方の数値の50%に自動的に調整されます」と先ほどから書いていますが、border-radius: 50%じゃあダメなのかと思う方もいるかもしれません。ダメです。

border-radius: 50% とは？

border-radius: 50% とは、heightの50%、widthの50%という意味なので、高さと幅が異なる場合に楕円形になってしまいます。
例えば heightが 50px でwidthが 200px の場合、縦方向のborder-radiusは 25px（50pxの50%）、横方向のborder-radiusは 100px (200pxの50%) になり、こんな形になってしまうのでお気をつけください。