ホームページ作成/ボックスや枠線の表示・装飾 (HTML,CSS)

画像を使わずにCSSだけで角を丸くする方法

CSS3のborder-radiusプロパティを使えば、スタイルシートだけで枠線の角(ボックスの隅)を丸くできます。この方法なら、「四隅の角丸を画像で用意して配置を工夫する」というような複雑で面倒なことは不要で、簡単にボックスの角を丸くできます。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加
※本記事は、初版を2009年7月24日に公開し、2013年4月、2015年4月に改訂しました。記事中の各画面イメージは2009年7月時点のものです。

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

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

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

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

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


 

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

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

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

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

角丸の半径を数値で指定するだけ
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プロパティを使っても角は丸くなりません。しかし、古いIEでもCSS3の一部を使用可能にする「CSS3 PIE」などを併用することで、ボックスの角を丸くできます。詳しくは、記事「IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方」をご参照下さい。

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

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

この記事を読んで良かったですか?

良かった

11

更新日:2015年04月13日

(公開日:2009年07月24日)

あわせて読みたい