カテゴリー
border-radius CSS3

【CSS3】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は、ボックスの4角(コーナー)の角丸の箇所・サイズを指定するプロパティです。角丸は楕円でも指定可能です。

border-radiusの指定について

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

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

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

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

border-radiusの指定できる数値

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