CSSのcalc()関数内で無限大infinity値が使えるように

Chrome 99 と Safari 15 から無限大 infinity 値が使えるようになりました。

使い道

用途としてはこれまで 9999px のように大きな値を指定していた箇所に使えると思います。

.button {
  border-radius: calc(infinity * 1px);
}

ボタンの高さいっぱいの角丸ボタンを作るときに便利ですね。

.button {
  border-radius: calc(1px / 0);
}

ちなみに、infinity 値を直接使わなくても、calc() 関数内の算出値が infinity になればいいので、上記のように書くこともできます。

デモ