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
inserted by FC2 system