border-*-radius: 100%

あんまりborder-top-left-radiusプロパティーとか使ったことなかったのでスケーラブルな半円をborder-*-radiusプロパティーを組み合わせて作ろうとしてうまく行かなかった。スケーラブルにするのは仕様の理解と一工夫が必要なようだ。100%が100%じゃないことがあるので。

Demo: border-*-radius: 100%

デモを見るとわかる(わからない)ように組み合わせによって100%が50%になってしまう。角を丸めた時にその丸まりが重ならないように適当に値を小さくして丸めるとちゃんと仕様で決められていた。つまりデモの最後の例のように縦と横の丸めを別々に指定して重ならないようにすれば、意図した通りに角を丸めることができるだろう。

例えばおわんを伏せたような半円を作りたいなら以下のようなCSSを書けばいける。

.test {
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}

空白区切りの1つ目が水平方向の丸め、2つ目が垂直方向の丸めなので、この場合は水平方向を50%に制限して重ならないようにするということ。

擬似要素を組み合わせてうまく回転させたりすると色の違う半円を斜めに組み合わせて円にしたりとかもできる。

おまけ。

<div class="test">&#x25ef;</div>

というHTMLだけで作った。ユニコードのグリフ使ってる(&#x25ef;はLARGE CIRCLE)のがちょっとずるい。Safariでのクリッピングのバグがbackground-clipプロパティーでも直せなくてひどい。