水平方向・垂直方向の形が異なる角丸を設定する。

今回書き留めておくのが、タイトルの通りです。
前回は水平方向と垂直方向の角丸が同じ場合を
紹介しました。今回は違う場合の設定方法を
紹介します。
今回はCSSのコード内にコメントを追記しました。

    *{margin:0;padding:0;}
    
    #container{
        width:640px;    
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }
    .box{
        margin:8px;
        width:120px;
        height:120px;
        background-color:aquamarine;
    }
    .fleft{float:left;}
    .clearBoth{clear:both;}

    /*　TopLeft　*/
    /*　Horizon(水平方向の半径)32px　Vertical(垂直方向の半径)16px　*/
    .bRadiusTL_H32V16{border-top-left-radius:32px 16px;}

    /*　TopRight　*/
    /*　Horizon(水平方向の半径)16px　Vertical(垂直方向の半径)32px　*/
    .bRadiusTR_H16V32{border-top-Right-radius:16px 32px;}

    /*　BottomLeft　*/
    /*　Horizon(水平方向の半径)48px　Vertical(垂直方向の半径)16px　*/
    .bRadiusBL_H48V16{border-bottom-left-radius:48px 16px;}

    /*　BottomRight　*/
    /*　Horizon(水平方向の半径)16px　Vertical(垂直方向の半径)48px　*/
    .bRadiusBR_H16V48{border-bottom-Right-radius:16px 48px;}

    /*　４隅をまとめて設定する。　*/
    .bRadius4Dir{
    /*　水平方向の長さ　 左上 右上　右下 左下　*/
        border-radius:4px 16px 32px 64px /
    
    /*　垂直方向の長さ　 左上 右上　右下 左下　*/
                      48px 32px 16px 4px;
    }

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

.box{

margin:8px;

width:120px;

height:120px;

background-color:aquamarine;

}

.fleft{float:left;}

.clearBoth{clear:both;}

/*　TopLeft　*/

/*　Horizon(水平方向の半径)32px　Vertical(垂直方向の半径)16px　*/

.bRadiusTL_H32V16{border-top-left-radius:32px 16px;}

/*　TopRight　*/

/*　Horizon(水平方向の半径)16px　Vertical(垂直方向の半径)32px　*/

.bRadiusTR_H16V32{border-top-Right-radius:16px 32px;}

/*　BottomLeft　*/

/*　Horizon(水平方向の半径)48px　Vertical(垂直方向の半径)16px　*/

.bRadiusBL_H48V16{border-bottom-left-radius:48px 16px;}

/*　BottomRight　*/

/*　Horizon(水平方向の半径)16px　Vertical(垂直方向の半径)48px　*/

.bRadiusBR_H16V48{border-bottom-Right-radius:16px 48px;}

/*　４隅をまとめて設定する。　*/

.bRadius4Dir{

/*　水平方向の長さ　左上右上　右下左下　*/

border-radius:4px 16px 32px 64px /

/*　垂直方向の長さ　左上右上　右下左下　*/

48px 32px 16px 4px;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

    <div class="box bRadiusTL_H32V16"></div>
    <div class="box bRadiusTR_H16V32"></div>
    <div class="box bRadiusBL_H48V16"></div>
    <div class="box bRadiusBR_H16V48"></div>
    <div class="box bRadius4Dir"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

</body>

</html>

半径の長さが異なる角丸を４隅まとめて設定する。

角丸をいちいち１か所ずづ設定するのが面倒と感じた方は、
上記のtest.cssの35行目のように設定します。

４つの角丸をまとめて指定する

水平方向・垂直方向とで同じ長さの半径の角丸を設定する場合は
「border-radius:4px 8px 16px 32px;」と指定します。
「左上px　右上px　右下px　左下px」の順に指定します。