{border-radius:値1 値2 値3 値4;} でボックスの4隅の角を丸く指定することができます。 値1～値4は順にボックスの枠線の４隅の左上（水平・垂直）、右上（水平・垂直）、右下（水平・垂直）、左下（水平・垂直） の部分になります。

【ブラウザ表示】

4つの角を水平方向、垂直方向共に半径50pxの正円で丸くする

<p class="kakumaru">角丸</p>

p.kakumaru{
width:200px;
border:solid 5px blue;
border-radius:50px 50px 50px 50px;
}

<p style="width:200px; border:solid 5px blue; border-radius:50px 50px 50px 50px;">
4つの角を水平方向、垂直方向共に半径50pxの正円で丸くする
</p>

■ 8つの値をスラッシュで区切り指定する

上記の角丸は全て50pxの値でしたが水平方向と垂直方向の値が異なる場合は
{border-radius:値1 値2 値3 値4 / 値5 値6 値7 値8;}のように 指定します。
今度の角丸は正円を上下から潰したような楕円型で角が曲がっています。

左上・水平50px、垂直20px 右上・水平50px、垂直20px 右下・水平50px、垂直20px　左下・水平50px、垂直20px

<p class="kakumaru2">
左上・水平50px、垂直20px 右上・水平50px、垂直20px 右下・水平50px、垂直20px　左下・水平50px、垂直20px
</p>

p.kakumaru2{
width:200px;
border:solid 5px blue;
border-radius:50px 50px 50px 50px / 20px 20px 20px 20px;
}

<p style="width:200px; border:solid 5px blue; border-radius:50px 50px 50px 50px / 20px 20px 20px 20px;">
左上・水平50px、垂直20px 右上・水平50px、垂直20px 右下・水平50px、垂直20px　左下・水平50px、垂直20px
</p>

■ その他の項目

スタイルシート一覧のページに戻る