CSSだけで角丸のボタンを作成する方法

WEBサイトにきれいなボタンを設置したい場合、画像を使っている人も多いと思いますが、CSS3の登場によってCSSだけでも非常にきれいなボタンなどを作成することが可能になりました。

そこで、今回はCSSのみで角丸のボタンを作成する方法をご紹介いたします。

HTMLの記述

HTMLはシンプルにdiv要素だけ書いておきます。

1	`<div` `id="button">ボタン</div>`

ボタンの外枠を作る

まずはボタンの形作りからしましょう。

#button{
width:200px;
height:80px;
font-size:40px;
color:white;
line-height:80px;
text-align:center;
background:red;
border:solid 2px black;
}

widthとheightでボタンの大きさを決めて、背景色や枠線をつけています。角丸のボタンにしなくていいという方は、このままでもOKですね。

ちょっと本題とは逸れますが、上記のCSSでは小技?を使っているので、ご紹介。

div要素のちょうど中心に「ボタン」という文字列がきていますね。横の位置は”text-align:center;”で中央揃えにしていますが、縦の位置調整には”line-height”を使用しています。「vertical-align:middle;を使うのでは？」と思った方もいると思います。

実は、vertical-alignには使える要素が決まっていて、主にインライン要素とテーブル要素のセルに対してしか効果がないんです。今回ボタンにする要素はdiv要素(ブロック要素)なので、このvertical-alignが効きません。

そこで役立つのが”line-height”なんです。line-heightは行の高さを指定するプロパティですが、行の高さを要素の高さ”height”と同じにすれば、上記画像のように文字列が中心にいくという仕組みです。”line-height”については、文字を装飾するためのプロパティまとめで詳しく紹介していますので、よかったら見てみてください。

これは覚えておくと役立つ場面があるかもしれませんので、主題から話は逸れましたが紹介させていただきました。では本題に戻りましょう。

角丸を指定する

ベースとなるボタンはできたので、あとは角丸をつけるだけですね。角丸にするには、border-radiusというプロパティを使います。例えば、すべての角が同じ丸みでいいという場合は非常に簡単で、以下のようにborder-radiusを追加するだけです。

#button{
width:200px;
height:80px;
font-size:40px;
color:white;
line-height:80px;
text-align:center;
background:red;
border:solid 2px black;
border-radius:15px;
}

border-radiusは15pxに指定されているので、各角で水平に15px、垂直に15pxの地点を中心に円を描いた時にできる外周をなぞって角が丸くなります。文字で書くとわかりにくいと思いますので、実際にブラウザで確認してみましょう。

各角の丸みを変える

各角の丸みを変えたい場合は、下記のプロパティを使うことで各角に異なる値を指定することができます。

「border-top-left-radius」

左上の角丸を指定できます。”border-top-left-radius: 100px 50px;”のように記述すると、水平に100px/垂直に50pxの地点が起点に角が丸くなります。値が1つの場合、水平方向と垂直方向の位置が同じ値になります。

「border-top-right-radius」

右上の角丸を指定できます。”border-top-right-radius: 100px 50px;”のように記述すると、水平に100px/垂直に50pxの地点が起点に角が丸くなります。値が1つの場合、水平方向と垂直方向の位置が同じ値になります。

「border-bottom-right-radius」

右下の角丸を指定できます。”border-bottom-right-radius: 100px 50px;”のように記述すると、水平に100px/垂直に50pxの地点が起点に角が丸くなります。値が1つの場合、水平方向と垂直方向の位置が同じ値になります。

「border-bottom-left-radius」

左下の角丸を指定できます。”border-bottom-left-radius: 100px 50px;”のように記述すると、水平に100px/垂直に50pxの地点が起点に角が丸くなります。値が1つの場合、水平方向と垂直方向の位置が同じ値になります。
では、実際にこれらのプロパティを使って、角丸を作ってみましょう。ブラウザで確認すると、それぞれの角が異なっているのがわかると思います。

#button{
width:200px;
height:80px;
font-size:40px;
color:white;
line-height:80px;
text-align:center;
background:red;
border:solid 2px black;
border-top-left-radius:30px 10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px 30px;
border-bottom-left-radius:20px 10px;
}

プロパティ・値をまとめて指定する

なお、これらの値はborder-radiusでまとめて指定することもできます。先ほど指定した値をまとめると、以下のようになります。

1	`border-radius:` `30px` `10px` `10px` `20px` `/` `10px` `10px` `30px` `10px;`

スラッシュ(/)の前が水平方向、スラッシュの後ろが垂直方向の半径の値で、左上・右上・右下・左下の順で指定していきます。スラッシュ以降を省略した場合には、水平垂直ともに同じ値になります。

また、それぞれの角の値は省略することができ、以下のようなルールで値が決定されます。

左下が省略された場合：右上と同じ値
右下が省略された場合：左上と同じ値
右上が省略された場合：左上と同じ値