【ホームページ作成】画像を使わずにCSSだけで角を丸くする方法

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

まずは、ボックスの四隅すべてを丸くする書き方をご紹介いたします。
CSS3では「border-radius」プロパティを使いますが、各ブラウザの独自拡張では、プロパティ名の先頭に「-moz-」や「-webkit-」を加えて以下のように記述します。 （※角丸の半径を20ピクセルにする場合の記述例です。）

CSS3：

border-radius: 20px;

Firefox：

-moz-border-radius: 20px;

Safari、Google Chrome：

-webkit-border-radius: 20px;

これらは、全部まとめて同時に記述しても特に問題はありません。したがって、下記のように書けばよいでしょう。

div.kadomaru {
   border-radius: 20px;         /* CSS3 */
   -moz-border-radius: 20px;    /* Firefox */
   -webkit-border-radius: 20px; /* Safari,Chrome */

   border: 3px green solid;     /* 枠線の装飾 */
   background-color: #ccffcc;   /* 背景色 */
}

最初の3行が、角丸にするための記述です。後の2行は枠線と背景色を装飾するための記述です。
※将来的には、1行目の「CSS3の記述方法」だけで、すべてのブラウザで角丸が実現できるようになるでしょう。現状では、CSS3の記述方法で角丸になるブラウザは（少なくとも代表的なブラウザの中には）ありません。

上記のスタイルシートによって、クラス名に「kadomaru」が指定されたdiv要素は、枠線の角が丸く表示されます。 その際、角丸の半径は20ピクセルになり、枠線は「太さ3ピクセルの緑色の実線」で、背景色は淡い緑色になります。

ここで、例えば下記のようなHTMLを書いてみます。

<div class="kadomaru">
   <p>角を丸くしたボックスの例</p>
</div>

上記のHTMLに先ほどのスタイルシートを適用させると、以下のように表示されます。（Firefoxでの表示例）

各プロパティの値（角丸の半径）を「30px」にすると、以下のように見えます。

borderプロパティで指定した線種を「二重線（double）」に変えると、以下のように二重線で表示されます。

このように、簡単に様々な角丸を試してみながらデザインを作ることができます。 （上記の例では、枠線と文字列との間隔は、p要素のmarginプロパティなどを使って調節できます。）

※備考※
●線種を点線（dotted）や破線（dashed）にした場合、Firefox 3.5では角の部分だけ実線（solid）で表示されます。（Firefox2では、点線や破線を指定しても実線で表示されます。）
●線種を二重線（double）にした場合、Safari 4では角の部分だけ実線（solid）で表示されます。
上記の問題がありますが、角が丸く表示されることに変わりはありません。今後のバージョンで改善されていくでしょう。

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

次に、四隅の角丸を一括して指定するのではなく、特定の角だけを丸くしたり、角によって丸くする半径を変えたりする方法をご紹介いたします。

四隅の角を別々に指定も可能。（Google Chrome、Safariでの表示例）

上部だけを丸くして「タブ」のように見せるデザインや、対角ごとに半径を変えるデザインなどが作れます。