以下の属性でボックスの枠線の4隅の角丸を個別に指定することができます。 値は1個だけでの指定、2個指定も可能です。

【ブラウザ表示】

左上の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。

右上の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。

右下の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。

左下の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。

左下の角と右上の角が水平方向　半径50px、垂直方向に半径30pxの４分の1の円で丸くなっています。

<p class="kakumaru3">左上の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p class="kakumaru4">右上の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p class="kakumaru5">右下の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p class="kakumaru6">左下の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p class="kakumaru7">左下の角と右上の角が水平方向　半径50px、垂直方向に半径30pxの４分の1の円で丸くなっています。
</p>

p.kakumaru3{
width:200px;
border:solid 5px blue;
border-top-left-radius:50px;
}
p.kakumaru4{
width:200px;
border:solid 5px blue;
border-top-right-radius:50px;
}
p.kakumaru5{
width:200px;
border:solid 5px blue;
border-bottom-right-radius:50px;
}
p.kakumaru6{
width:200px;
border:solid 5px blue;
border-bottom-left-radius:50px;
}
p.kakumaru7{
width:200px;
border:solid 5px blue;
border-bottom-left-radius:50px 30px;
border-top-right-radius:50px 30px;
}

<p style="width:200px; border:solid 5px blue; border-top-left-radius:50px;">
左上の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p style="width:200px; border:solid 5px blue; border-top-right-radius:50px;">
右上の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p style="width:200px; border:solid 5px blue; border-bottom-right-radius:50px;">
右下の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p style="width:200px; border:solid 5px blue; border-bottom-left-radius:50px;">
左下の角だけ水平方向、垂直方向共に半径50pxの４分の1の正円で丸くなっています。
</p>
<p style="width:200px; border:solid 5px blue; border-bottom-left-radius:50px 30px; border-top-right-radius:50px 30px;">
左下の角と右上の角が水平方向　半径50px、垂直方向に半径30pxの４分の1の円で丸くなっています。
</p>

■ その他の項目

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