CSS: border-radius: % 指定
・枠線の角丸 (border-radius) のサンプル。
% で指定すると楕円が描けます。
パラメータを1個指定
パラメータが1個の場合はすべての角に共通の設定になります。
div1_1
border-radius: 30%;
div1_2
border-radius: 50%;
楕円になる。
div1_3
border-radius: 90%;
値が大きい場合は自動調整される
パラメータを2個指定
パラメータが2個の場合は 1) 左上と右下、2) 右上と左下が共通の
設定になります。
div2_1
border-radius: 10% 50%;
div2_2
border-radius: 30% 70%;
div2_3
border-radius: 20% 80%;
div2_4
border-radius: 10% 90%;
パラメータを4個指定
パラメータが4個の場合は、左上, 右上, 右下, 左下の順に個別に
指定します。
div4_1
border-radius: 20% 30% 40% 50%;
div4_2
border-radius: 50px 50% 50% 50px
px と % を併用
div4_3
border-radius: 20px 70% 30% 20px;
px と % を併用
div4_4
border-radius: 50% 50% 10% 10%;
/ で横方向と縦方向の半径を個別に指定
・border-radius: (横)/(縦); で横方向、縦方向の大きさをそれぞれ
指定できます。
・4つ個別に指定する場合は
border-radius: 左上X 右上X 右下X 左下X / 左上Y 右上Y 右下Y 左下Y;
div5_1
border-radius: 50% 50% 0 0;
/ なしの元サンプル
div5_2
border-radius: 50% 50% 0 0 / 90% 90% 0 0;
(2015/01-2024/04)
動作 : Edge120, Firefox120, Chrome119, IE11
◎ ノート
・MDN:border-radius