【HTML・CSS】角が丸い枠（角丸）のボタンのつくりかた

はじめに
角丸ボタンのつくり方

はじめに

本記事ではHTMLとCSSを使った角丸ボタンの作り方を説明します。

角丸ボタンのつくり方

以降では角丸ボタンを作成する方法を順を追って説明します。

最初に角を丸くする前のベースとなるボタンを作成し、すべての角を丸くしたボタンや1箇所だけ丸くしたボタンを作成します。

ベースとなるボタン

それではベースとなるボタンを作成しましょう。

HTML

<button class="rounded-corner">button</button>

CSS

.rounded-corner {
  background-color: #0a458a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;
}

See the Pen
角丸ボタンをつくる1 by aiiro (@aiiro29)
on CodePen.

すべての角を丸くした角丸ボタン

ベースのボタンを用意できたので、次はこのボタンのすべての角を丸くします。

角を丸くするには、CSSプロパティの”border-radius”を使用します。

border-radius - CSS: カスケーディングスタイルシート | MDN

border-radius は CSS のプロパティで、要素の境界の外側の角を丸めます。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角になります。

.rounded-corner {
  background-color: #0a458a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;

  border-radius: 10px; // ①
}

border-radiusを追加すると、10pxのコーナーが設定された角丸ボタンになります（①）。

See the Pen
角丸ボタンをつくる2 by aiiro (@aiiro29)
on CodePen.

左上の1箇所だけを丸くしたボタン

border-radiusは4つの値を設定することができ、順に左上、右上、右下、左下と反映されます。

例として左上の1つの角だけを丸くしたボタンを作成します。

.rounded-corner {
  background-color: #0a458a;
  width: 200px;
  height: 100px;
  color: #FFFFFF;
  font-size: 24px;

  border-radius: 30px 0 0 0; // ①
}

左上以外の箇所は角をそのままにしておくために、0を設定します。（①）

See the Pen
角丸ボタンをつくる3 by aiiro (@aiiro29)
on CodePen.

角丸ボタンのつくりかたは以上です。