角丸を画像で作るのは面倒

角丸用の画像を作るのは面倒!

角丸用の画像を作るのは面倒!

ボックスの四隅を丸くする方法として、昔は「四隅の角丸を画像で用意し、それらを背景画像として配置する」といった方法がよく使われていました。しかしこの方法は、画像を用意しなければならない上に、画像の配置を調整するために複雑なソースを書く必要もあり、とても面倒でした。

そこで今回は、画像を使わずにスタイルシートだけで「ボックスの角を丸くする方法」をご紹介いたします。


 

CSS3のborder-radiusプロパティなら簡単に角丸が作れる

border-radiusプロパティを使ってボックスの角を丸くした例。半径を数値で指定するだけなので調整・修正が簡単。この図は、半径を20pxと40pxにした例。

「border-radius」プロパティを使ってボックスの角を丸くした例。半径を数値で指定するだけなので調整・修正が簡単。この図は、半径を20pxと40pxにした例。

CSS3には、この角丸を簡単に実現できる「border-radius」というプロパティが用意されています。このborder-radiusプロパティを使えば、四隅の画像を用意することなく、様々な色・大きさで、枠線やボックスの角を丸く表示できます。CSS1行で済み、とても簡単です。

角丸の半径を数値で指定するだけ
border-radiusプロパティを使えば、数値を修正するだけで角丸の大きさ(半径)を変更できます。角丸を画像で作った場合は、半径を修正するためには画像そのものを作り直す必要がありました。それに比べれば、border-radiusプロパティを使う方が遙かに少ない労力で済みます。

角丸の線種も自由に指定可能
角丸の線種も自由に指定可能

角丸の線種も自由に指定可能

スタイルシートで角を丸くしているだけなので、枠線の線種や太さは自由に指定可能です。右図のように、ボックスの枠線を点線や破線・二重線などにしても、角を丸くできます。

※ボックスに枠線を付ける場合は、borderプロパティを使って枠線の線種や太さ・色を指定し、さらにborder-radiusプロパティを使って角丸の半径を指定します。
※枠線は必須ではありません。枠線がなくても背景色や背景画像が付加されていれば、その背景の角が丸く見えます。


 
四隅の丸さを個別に指定可能
四隅の角を別々に指定も可能

四隅の角を別々に指定も可能

border-radiusプロパティに関連して、四隅を別々に指定するためのborder-top-left-radiusプロパティ等も用意されています。これらを活用すれば、「角を丸くするかどうか」、「どれくらい丸くするか」を四隅でバラバラに指定できます。例えば右図のように、上側だけを丸くしたり、対角だけを丸くしたりもでき、様々なデザインが作れます。


 

CSS3のborder-radiusプロパティは、わりと古いブラウザでも使える

CSS3の「border-radius」プロパティは、Firefox、Safari、Chromeなど多くのブラウザでかなり前から使用可能。IEでは、IE9から使用可能。

CSS3の「border-radius」プロパティは、Firefox、Safari、Chromeなど多くのブラウザでかなり前から使用可能。IEでは、IE9から使用可能。

このborder-radiusプロパティは、CSS3で新しく追加されたプロパティです。しかし、Firefox、Safari、Chromeでは、初期の頃のバージョンから既に使用可能でした。Internet ExplorerでもIE9以降で表示可能です。

※IE8以下では、border-radiusプロパティを使っても角は丸くなりません。もはやIE8以下は気にしなくても良いでしょうが、どうしてもIE8で表示させる必要がある場合は、記事「IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方」でご紹介している方法を併用することで見せられます。

それでは、CSS3のborder-radiusプロパティを使って角を丸くする方法を順に見ていきましょう。とても簡単です。

【この記事の目次】
1. 角を丸くするサンプル(このページ)
2. 四隅の角すべてを丸くする方法
3. 特定の角だけを個別に丸くする方法

※本記事は、初版を2009年7月24日に公開し、2013年4月、2015年4月、2017年6月に改訂しました。記事中の各画面イメージは2009年7月時点のものです。