border-radiusプロパティで角丸のボックスを指定する

FirefoxおよびSafari、Google Chromeで角丸のボックスを表現する

2006年ごろからボックスの角を丸くする表現が増え、現在では定番の視覚表現として多くのWebサイトに使われている。CSS 2には、角丸を指定できるプロパティが用意されていないため、背景画像などを駆使する「力業」で表現することになる。角丸のために、div要素を追加しなくてはならないため、多用は控えたい。CSS 3では「border-radius」というプロパティで角丸の表現を可能にしようとしている。先行実装しているWebブラウザは、今のところFirefoxおよびSafari、Google Chromeである。それぞれPrefix（接頭辞）を付けることで実行できる。Firefoxなら-moz-border-radius: 30px;、SafariとGoogle Chromeは-webkit-border-radius: 30px;と記述すればよい【5】【6】。値の30pxは、角丸の半径だ。


【5】border-radiusプロパティを実行するには、Prefixが必要となる


【6】Firefox2および3は「-moz-border-radius」を使用することで、角丸のボックスが表現できる。Webkitを採用しているSafari3とGoogle Chromeも同様に表示できる

ボーダーの非表示、角丸ボックスのバリエーションを指定する

border: none;を追記して、ボーダーを非表示にしても角丸ボックスが表現できる。Firefox、Safari、Google Chromeの3つのWebブラウザで同様の表示になる【7】。また、borderradiusプロパティは、角丸の水平方向と垂直方向の半径を個別に指定することができるため、ボックスデザインのバリエーションを容易につくることが可能だ。「borderradius:50px 10px;」のように記述すればよい。ただし、Firefoxでは解釈が異なり、ひとつ目の値「50px」を左上と右下、ふたつ目の値「10px」を右上と左下に適用する【8】。


【7】Firefox、Safari、Google Chromeでは、「border: none;」を追記してボーダーを非表示にしても角丸ボックスとして表示される




【8】Firefoxは「50px」を左上と右下、ふたつ目の値「10px」を右上と左下に適用する。上の図はSafariの表示結果



→インデックスページへ
→次のページへ