border-radius 長方形+半円の作り方

.rectangle {
    border-radius: 9999px;
}

こちらはiOS Safariでもスタイルが当たってくれることはテスト済み。

上記でもいいが、9999pxというのは嫌なので、
以下書き方でも長方形+半円のデザインが実現可能。
注意: iOS Safariだと効かないことが判明 2024.6.18現在

.rectangle {
    border-radius: calc(Infinity * 1px);　// calc(1px / 0)
}

iOS Safari以外ならスタイルが当たる。