知っておくべきポイント
基本的なborder‐radiusプロパティ
課題
どんな四角形の要素も、十分に大きな値を border‐radiusに指定すれ
ば円形になることに気づいた読者も多いでしょう。例えば次のような CSS
を使って表現されます。
ここで100px以上の値を border‐radiusに指定しても、表示は変わら
ず円形のままです。その理由は、仕様の中で説明されています。
隣接するボーダーの半径の和がボーダーボックスのサイズを上回る場
合、ユーザーエージェントはボーダーの重なりがなくなるまですべて
のボーダーの半径を縮小します。
— CSSBackgrounds&BordersLevel3(w3.org/TR/css3‐background/#corner‐
overlap)
さまざまな楕円形
9
background:#fb3;
width:200px;
height:200px;
border‐radius:100px;/*>=辺の長さの半分*/