カテゴリー
border-radius border-top-left-radius CSS3

【CSS3】border-top-left-radius:左上の角丸のサイズを指定する

(例)【CSS3】border-top-left-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-top-left-radius:左上の角丸のサイズを指定する

 CSS3のborder-top-left-radiusは、ボックスの左上の角丸サイズを指定するプロパティです。
 数値を1つ指定した場合は角丸の水平・垂直方向は同じサイズになりますが、2つ指定した場合は1つ目が水平方向、2つ目が垂直方向になります。

border-top-left-radiusの指定できる数値

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