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

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

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

この記事の担当ガイド

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

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

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

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

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

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


 

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

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

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

新しいCSSの規格である「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で新しく追加されたプロパティです。しかし、CSS3が本格的に普及する前から、Firefox、Safari、Chrome等のブラウザでは、(独自拡張として実装されていて)使用可能でした。Internet Explorerでも、IE9以降では表示可能です。

IE8以下では「border-radius」プロパティを使っても角は丸くなりません。しかし、古いIEでもCSS3の一部を使用可能にする「CSS3 PIE」などを使うことで、IE8以下でもボックスの角を丸くすることができます。詳しくは、記事「IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方」をご参照下さい。

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

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

更新日:2013年04月19日

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

あわせて読みたい

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

    良かった

    0

    この記事を共有する