CSSでボタンを角丸にする方法

ボタンを角丸にすることは、Webサイトのデザインをより洗練させ、ユーザーインターフェースを向上させるために有効な手段です。CSSのborder-radiusプロパティを使うことで、簡単に角丸ボタンを作成することができます。

本記事では、border-radiusプロパティを使った角丸ボタンの作成方法をご紹介します。

この記事でわかること

CSSのborder-radiusプロパティとは

CSSのborder-radiusプロパティは、HTML要素の角を丸くするために使用されます。

値はピクセルやパーセントで指定でき、それぞれに異なる半径を設定することも可能です。

例えば、border-radius: 10px;とすると、要素の全角が10ピクセルの半径で丸くなりますし、border-radius: 10px 20px 30px 40px;と指定すると、左上から時計回りにそれぞれ異なる半径で丸みをつけることができます。

円形や楕円形のデザインもこのプロパティで表現でき、ウェブデザインにおいて柔らかさや立体感を出す効果があります。

border-radiusプロパティは、要素の角丸の半径を指定します。

以下のCSSコードのように、半径の値をpx単位で指定することで、すべての角を同じように丸くすることができます。

button {
border-radius: 10px;
}

border-radiusプロパティは、4つの値をスペースで区切って指定することで、各角を個別に丸くすることができます。

以下のCSSコードは、左上と右下の角を10px、右上と左下の角を5pxの半径で丸くする例です。

button {
border-radius: 10px 5px 5px 10px;
}

border-radiusプロパティの値に%を指定すると、要素の幅や高さに対する割合で角丸の半径を指定することができます。以下のCSSコードは、ボタンの幅の50%の半径で角丸を作る例です。

button {
border-radius: 50%;
}

border-radiusプロパティの値に2つの値をスラッシュ（/）で区切って指定することで、楕円形の角丸を作ることができます。

1つ目の値は横方向の半径、2つ目の値は縦方向の半径を表します。以下のCSSコードは、横方向に10px、縦方向に5pxの半径で楕円形の角丸を作る例です。

button {
border-radius: 10px / 5px;
}

最後にborder-radiusプロパティを使用したサンプルコードを紹介します。

以下のHTML・CSSコードは、上記の解説をまとめた例です。

HTML
<button>ボタン</button>

CSS
/* すべての角を10pxの半径で丸くする / button.rounded-all { border-radius: 10px; } / 各角を個別に丸くする / button.rounded-corners { border-radius: 10px 5px 5px 10px; } / 幅の50%の半径で角丸を作る / button.rounded-half { border-radius: 50%; } / 楕円形の角丸を作る */ button.rounded-ellipse { border-radius: 10px / 5px; }