CSSを使ってボックスやボタンの角を丸くする方法

昔は要素を角丸するには背景画像を使ったりして表現する必要がありましたが。今ではcssの「border-radius」プロパティを使うことで簡単に設定することができます。
簡単にボックスの角を丸する方法を紹介します。

四つ角を角丸にする

■HTML

<div class="radius-box">border-radius: 20px</div>

■css

input[type=radio] {
    display: none;
}
.border-radius {
  width: 280px;
  height: 100px;
  line-height: 100px;
  background-color: red;
  border-radius: 20px;
  color: #fff;
  text-align: center;
}

四つ角を異なる角丸にする

■HTML

<div class="radius-box02">border-radius: 10px 20px 30px 40px;</div>

■css

input[type=radio] {
    display: none;
}
.radius-box02 {
  width: 280px;
  height: 100px;
  line-height: 100px;
  background-color: red;
  border-radius: 10px 20px 30px 40px;
  color: #fff;
  text-align: center;
}