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

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

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

この記事の担当ガイド

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

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

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

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

各ブラウザの最新版だけを対象にするなら、記述するCSSソースは上記の1行だけで十分です。しかし、古いバージョンのブラウザ(Firefox4未満、Chrome10未満、Safari5未満など)も対象にしたいなら、各ベンダープレフィックスを加えて、以下でご紹介するように記述する必要があります。

四隅の角をすべて丸くする方法(古いブラウザへの対処版)

角を丸くする方法として、CSS3では「border-radius」プロパティを使いますが、各ブラウザの独自拡張では、プロパティ名の先頭に「-moz-」や「-webkit-」のようなベンダープレフィックスを加えて、以下のように記述します。

Firefox用 (Firefox4以降は不要):
-moz-border-radius: 20px;

Safari、Chrome用 (Safari5以降・Chrome10以降は不要):

-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プロパティなどを使って調節できます。

※Firefox3.5では、線種が点線(dotted)や破線(dashed)の場合に、角の部分だけ実線(solid)で表示されます。Safari4では、線種を二重線(double)にした場合に、角の部分だけ実線(solid)で表示されます。古いバージョンではこれらのような問題がありましたが、最新版ではすべて解決されています。

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

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

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

更新日:2013年04月19日

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

あわせて読みたい

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

    良かった

    10

    この記事を共有する