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

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

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

この記事の担当ガイド

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

  • このエントリーをはてなブックマークに追加

四隅の角をすべて丸くするCSSの記述方法

まずは、ボックスの四隅すべての角を丸くする書き方をご紹介いたします。記述方法はとても簡単で、以下のように、border-radiusプロパティの値に「丸くする角の半径」を数値で指定するだけです。
border-radius: 20px;
上記の記述なら、半径20ピクセルで角が丸くなります。とても簡単ですね。このborder-radiusプロパティは、あくまでも「隅を丸くする半径」を指定するだけのプロパティです。実際に角丸が目に見えるようにするためには、borderプロパティを併用して枠線を引くか、もしくはbackground-colorプロパティなどを併用して背景色を付加する必要があります。その記述例は下記の通りです。

枠線を引いて、枠線の角を丸くする方法:
border: 3px green solid;  /* 枠線を引く */
border-radius: 20px;      /* 角丸の指定 */
太さ3pxで緑色の実線を引き、その角(四隅)を20pxの半径で丸くします。

背景色を付けて、ボックスの角を丸くする方法:
background-color: green;  /* 背景色の指定 */
border-radius: 30px;      /* 角丸の指定 */
背景色が緑色のボックスの角(四隅)を30pxの半径で丸くします。

border-radiusプロパティが使えるブラウザ・使えないブラウザ

角丸を実現するために記述するCSSは、上記のborder-radiusプロパティ1つだけで十分です。この記述は、IE9以降、Firefox4以降、Chrome5以降、Safari5以降、Opera11.5以降で表示できます。

もし、それよりも古いバージョンのブラウザも対象にしたいなら、各ベンダープレフィックスを加えて、以下でご紹介するように記述する必要があります。

四隅の角をすべて丸くするCSSの記述方法(古いブラウザ対応版)

角を丸くするborder-radiusプロパティは、FirefoxやChrome等の古いバージョンでは、プロパティ名の先頭に「-moz-」や「-webkit-」のようなベンダープレフィックスを加えないと表示されませんでした。現在のシェアから考えて、もはやこれらの古いバージョンを考慮する必要性はないでしょう。しかし、どうしても対応しておきたい場合は、以下のように記述します。

Firefox用 (Firefox3.6以下のみ必要):
-moz-border-radius: 20px;

Chrome、Safari用 (Chrome4以下、Safari4以下のみ必要):

-webkit-border-radius: 20px;
これらは、全部まとめて同時に記述しても特に問題はありません。したがって、下記のように書けばよいでしょう。
div.kadomaru {
   -moz-border-radius: 20px;    /* 古いFirefox */
   -webkit-border-radius: 20px; /* 古いSafari,Chrome */
   border-radius: 20px;         /* CSS3 */

   border: 3px green solid;     /* 枠線の装飾 */
   background-color: #ccffcc;   /* 背景色 */
}
最初の3行が、角を丸くするための記述です。後の2行は枠線と背景色を装飾するための記述です。このCSSによって、class名に「kadomaru」が指定されたdiv要素は、枠線の角が丸く表示されます。 その際、角丸の半径は20ピクセルになり、枠線は「太さ3ピクセルの緑色の実線」で、背景色は淡い緑色になります。

※IE8以下では、Microsoftのベンダープレフィックス「-ms-」を付けても角は丸くなりません。IE9以降なら、CSS3の記述方法で角が丸くなります。したがって、ベンダープレフィックス「-ms-」を併せて記述しておく必要はありません。

四隅の角を丸くした表示例

ここで、例えば下記のようなHTMLを書いてみます。
<div class="kadomaru">
   <p>角を丸くしたボックスの例</p>
</div>
上記のHTMLに先ほどのスタイルを適用させると、以下のように表示されます。

上から順に、 角丸の半径を20pxにした場合、角丸の半径を30pxにした場合、角丸の半径を30pxにして線種を「二重線(double)」に変えた場合。

上から順に、 角丸の半径を20pxにした場合、角丸の半径を30pxにした場合、角丸の半径を30pxにして線種を「二重線(double)」に変えた場合。


このように、簡単にボックスの角を丸くしたデザインを作ることができます。枠線と文字列との間隔は、p要素のmarginプロパティ・paddingプロパティなどを使って調節できます。

四隅の角を個別に指定する方法

次に、四隅の角丸を一括して指定するのではなく、特定の角だけを丸くしたり、角によって丸くする半径を変えたりする方法をご紹介いたします。四隅を個別に指定すると、上部だけを丸くして「タブ」のように見せるデザインや、対角ごとに半径を変えるデザインなどが作れます。

Page.3 特定の角だけを丸くする方法へ >>

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

良かった

11

更新日:2015年04月13日

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

あわせて読みたい