border-radiusプロパティは「角丸」を指定する場合に使用します。
html
<div class="square_border_radius"></div>
css
.square_border_radius { width: 100px; height: 100px; background-color: #39a9d6; border-radius: 10px; }
設定方法
指定方法
border-radius: 値(一括指定)
border-radius: 左上 右上 右下 左下(個別指定)
border-radius: 左上 右上 右下 左下 / 左上 右上 右下 左下(個別指定 水平 / 垂直)
border-top-left-radius: 値(左上のみ)
border-top-right-radius: 値(右上のみ)
border-bottom-left-radius: 値(右下のみ)
border-bottom-right-radius: 値(左のみ)
値
- 数値
- px / em 等で指定
- パーセンテージ
- %で指定
個別に設定
html
<div class="square_border_radius2"></div>
css
.square_border_radius2 { border-radius: 10px 30px 60px 80px; }
個別に設定(水平 / 垂直)
html
<div class="square_border_radius3"></div>
css
.square_border_radius3 { width: 100px; height: 100px; background-color: #39a9d6; border-radius: 100px 30px 80px 20px / 50px 0 40px 10px; }