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

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

  • borderプロパティを併用して枠線を引く。→枠線の角が丸く表示されます。
  • background-colorプロパティを併用して背景色を加える。→背景の角が丸くなります。
  • background-imageプロパティを併用して背景画像を加える。→背景の角が丸くなります。

記述例を下記にご紹介しておきます。

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

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

上記のように、border-radiusプロパティで指定する半径の大きさは、単位pxを使ってピクセル数で指定することもできますし、単位emを使って文字サイズを基準に下大きさで指定することもできます。

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

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

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

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


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

備考:古いブラウザでもボックスの角を丸くする方法

角丸を実現するborder-radiusプロパティは、IE9以降、Firefox4以降、Chrome5以降、Safari5以降、Opera11.5以降で表示できます。かなり古いバージョンから対応していますので、さらに古いバージョンのブラウザでの表示を気にする必要性はないでしょう。どうしても古いバージョンを対象にする必要がある場合は、下記のベンダープレフィックスを加えた書き方を併用することで対応できます。

■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-」を併せて記述しておく必要はありません。

四隅の角(左上・右上・左下・右下)を個別に指定する方法

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

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