CSS: border-radius: px 指定

・枠線の角丸 (border-radius) のサンプル。
・px で指定した場合は、角が指定値の正円になります。
  半径が大きすぎる場合は自動調整されます。
・楕円にしたい場合は、px 指定ではなく % 指定を使します。

パラメータを1個指定

パラメータが1個の場合はすべての角に共通の設定になります。

div1_1
border-radius: 10px;

div1_2
border-radius: 30px;

div1_3
border-radius: 50px;

div1_4
border-radius: 200px;
値が大きい場合は自動調整されます。

パラメータが2個の場合は 1) 左上と右下、2) 右上と左下が共通の
設定になります。

div2_1
border-radius: 10px 50px;

div2_2
border-radius: 100px 50px;

div2_3
border-radius: 50px 100px;

パラメータが4個の場合は、左上, 右上, 右下, 左下 の順に個別に
設定します。

div4_1
border-radius: 20px 30px 40px 50px;

div4_2
border-radius: 0 50px 0 0;

div4_3
border-radius: 50px 50px 0 0;

div4_4
border-radius: 0 150px 0 0;

div4_5
border-radius: 30px 150px 60px 30px;

div4_6
border-radius: 30px 30px 130px 130px;

(2015/01-2024/04)
動作 :  Edge120, Firefox120, Chrome119, IE11

◎ ノート
・MDN:border-radius