border-radiusの設定例
border-radius自体はボタンの角を丸めたりしてよく利用していますが、4つの角それぞれに楕円の形状を設定できるということを知ったので、いくつか設定例をまとめておきます。
目次
- 4つの角がすべて同じ形状
- 4つの角それぞれに設定
- 4つの角と角ごとの水平、垂直方向のサイズを設定
4つの角がすべて同じ形状
border-radius: 50px;
4つの角それぞれに設定
左上、右上、右下、左下の順番で指定します。
border-radius: 20px 40px 60px 80px;
4つの角と角ごとの水平、垂直方向のサイズを設定
水平方向の左上、右上、右下、左下、垂直方向の左上、右上、右下、左下の順番で指定します。
border-radius: 20px 40px 60px 80px / 100px 100px 100px 100px;
パッと見では分かり難いので、border-radius－CSS3リファレンス に掲載されている図を見ると理解しやすいです。