[Sponsor] 「WordPressを仕事に活かしたい」方のための
PHP・WordPress講座を渋谷で開催!
はじめてのWebデザイン『HTML・CSS』入門

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

記事の一覧の見た目やボタンなど、四角い要素のコーナーの角を丸くしたいというときは、このborder-radiusというプロパティを使います。border-radiusを使うことで、画像を使わずにCSSだけでボタンの見た目を作ることができます。

  • HTML・CSS

公開日:2019/07/10最終更新日:2019/07/10

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;
}

理解度チェック

はじめてのWebデザイン『HTML・CSS』入門

1. HTMLとCSSを学ぶ準備

2. HTMLの基礎知識

3. CSSの基礎知識

このレッスンの著者