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

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

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

しかし、次世代のCSS規格である「CSS3」には、この角丸を簡単に実現できる「border-radius」というプロパティが用意されます。 この「border-radius」プロパティを使えば、画像を使うことなく、様々な色・大きさで、枠線やボックスの角を丸く表示させられます。

角丸の半径を数値で指定するだけなので、半径の修正も簡単。（Safariでの表示）

上図で示したように、「border-radius」プロパティを使えば、値を修正するだけで角丸の半径を変更可能です。 角丸を画像で作っている場合、半径を修正するには画像そのものを作り直す必要があります。 それに比べれば、「border-radius」プロパティを使う方が、遙かに少ない労力で調整が可能です。

枠線を丸くした際でも、「線種の指定」が可能。（Google Chromeでの表示）

また、スタイルシートで角を丸くしているだけなので、枠線の線種も（通常のボックスと同じように）指定可能です。 上図のように、点線や破線・二重線などにもできます。

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

さらに、四隅の角は個別に指定も可能なため、上図のように「上側だけを丸く」したり、「対角だけを丸く」したりもできます。

CSS3のborder-radiusプロパティを先取り

Firefox、Safari、Google Chrome

この「border-radius」プロパティは、CSS3のプロパティです。しかし、Firefox、Safari、Google Chromeの各ブラウザでは、（独自拡張として）実装されており、既に使用可能です。

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

※現状では、Internet ExplorerやOperaでは角丸にはなりません。しかし、「角の丸くない普通の四角」として表示されるだけなので、使っても特に不具合は起きません。 また、「CSS3のプロパティ」なので、将来的にはこれらのブラウザでも表示できるようになるでしょう。

【この記事の目次】

１．角を丸くするサンプル（このページ）
２．四隅の角をすべて丸くするCSSソース
３．特定の角だけを丸くするCSSソース