カテゴリー: border-radius

（例）【CSS3】border-radiusの使用方法

See the Pen
border-radius by linlin (@linlin098765)
on CodePen.

<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
<div class="sample4"></div>
<div class="sample5"></div>

div{
  width:200px;
  height:50px;
  background-color:red;
  margin-bottom:10px;
}
.sample1{
  border-radius:10px 10px 10px 10px / 5px 5px 5px 5px;
}
.sample2{
  border-top-left-radius:20px;
}
.sample3{
  border-top-right-radius:20px;
}
.sample4{
  border-bottom-left-radius:20px;
}
.sample5{
  border-bottom-right-radius:20px;
}

【CSS3】border-radius：角丸の箇所・サイズを指定する

　CSS3のborder-radiusは、ボックスの４角（コーナー）の角丸の箇所・サイズを指定するプロパティです。角丸は楕円でも指定可能です。

border-radiusの指定について

　指定方法としては「border-radius:楕円の水平方向 / 楕円の垂直方向」のようになります。４角指定可能であり「border-radius:左上・右上・右下・左下」で指定します。

　水平方向と垂直方向の両方を指定する場合「border-radius:左上・右上・右下・左下の水平方向 / border-radius:左上・右上・右下・左下の垂直方向」のように指定する。
　また、水平または垂直方向の指定をしなかった場合、水平・垂直方向がともに同じ値になります。

　コーナーの指定自体を記述しなかった場合は下記のようになります。

• 左下が省略した場合、右上と同一
• 右下が省略した場合、左上と同一
• 右上が省略した場合、左上と同一

border-radiusの指定できる数値

• 数値
  px, em,exなど
• %
  パーセント指定