border-radius生成

仕組み

border-radiusは、3つの隅を丸めて1つを角のままにしたくなるまでは簡単です。そうなると、誰もが4つの値の順序を調べ直すことになります。

順序を、これで覚える

左上、右上、右下、左下の順で、左上から時計回りです。同じ左上から時計回りの順序は、margin、padding、borderの省略記法にも当てはまります。一度覚えておく価値があります。

ピクセルかパーセントか

ピクセルなら、要素のサイズにかかわらず同じ曲線になります。パーセントは要素自身の幅と高さに対する相対値のため、曲線も拡大縮小します。正方形に50%の半径を指定すると完全な円になり、これは丸いアバターを作る定番の手法です。

カプセル型（ピル型）

要素の高さの半分より大きい半径は、ちょうど半分に丸められます。そのため、border-radius: 999pxを指定すれば、高さにかかわらず確実にカプセル型になります。正しい値を計算するよりも堅牢で、内容が変わっても機能し続けます。

入れ子の要素で隅が変に見えるとき

角丸のボックスの中にある別の角丸のボックスには、間のpaddingの分だけ小さくした半径を内側に指定する必要があります。そうしないと、曲線が同心円状に並びません。ささいな点ですが、カードがきちんと作られて見えるようになります。