3-13. コーナーに角丸を指定する（border-radius）

1.コーナーを角丸にする「border-radius」

「border-radius」は、要素のコーナーを角丸にすることができるCSSプロパティです。値はpxか%で指定します。

サンプルHTML：

<div class="box"></div>

サンプルCSS：

.box{
  width: 100px;
  height: 100px;
  margin: auto;
  background: #f00;
  border-radius: 20px;
}

%で指定することも出来ます。試しに円の形を作ってみましょう。

サンプルCSS：

.box{
  width: 100px;
  height: 100px;
  margin: auto;
  background: #f00;
  border-radius: 50%;
}

2.角丸のサイズをバラバラに指定する

角丸のサイズは1箇所ずつ指定することもできます。

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

まとめて指定をするショートハンドもあります。スペースをあけて、左上・右上・右下・左下の順番で指定します。

サンプルCSS：

border-radius: 10px 20px 30px 40px;

3.CSSだけでボタンを作る

試しにborder-radiusを使ってCSSだけでボタンを作ってみましょう。

サンプルHTML：

<a href="#" class="btn">トップページへ</a>

サンプルCSS：

.btn{
  background: #53caff;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  border-radius: 8px;
}