現在はまだ規格がきちんと定まっていないのと、ブラウザの対応状況の問題であまり使われてないCSS3なんだけど、もし普通に使える状態になったら多用されることが予想されるのが「border-radius」というプロパティ。これはCSSで指定するだけで角丸（丸い角）が作れるプロパティで、今現在角丸の表現に使われてる「角に丸い画像を使う」「空のspanなどを使って擬似的に丸く見せる」などの面倒で手間がかかる方法をとらなくて済むというメリットがある。
もちろん「ブラウザが対応してない」というのは主にIEのことなんだけど、基本的にそれ以外の対応ブラウザでもborder-radiusを使うときは「-moz-」や「-webkit-」などのベンダープレフィックスを付けなさいと多くのサイトで書かれている。
ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。
将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子（vendor identifier）でブラウザの種類を特定します。
でもこの手のHow to記事は書かれてからかなり時間がたったものも多く「実はもうベンダープレフィックスを付けなくてもほとんどのブラウザは標準で対応してるのでは？」と考えてしまった。IE以外のブラウザはかなり頻繁にアップデートされていて、1年違えば話がまったく違う可能性も高い。また、各ブラウザ用にベンダープレフィックスを追加してCSSを記述するとかなり煩雑になってしまうのも事実で、普通に1行「border-radius: 15px;」などと書いて済むならそれに越したことはない。
というわけでデモページを作って、2011年1月19日現在の（ベータ版ではない）最新の各ブラウザのborder-radius対応状況を調べてみた。（border-radiusはそれぞれの角ごとに角度を変えたりすることができるが、今回は一番シンプルで使う頻度も高そうな一括設定のみをチェックした。）もちろんベンダープレフィックスを付ければ対応してることはわかってるので、付けずに書いた場合に角が丸くなるかのテスト。以下がそのデモページ。
結果は以下のとおり。
| Internet Explorer 8 (Trident) | 非対応 |
|---|---|
| Firefox 3.6 (Gecko) | 非対応 （ベンダープレフィックス付きなら対応） |
| Google Chrome 8.0 (Webkit) | 対応 |
| Opera 11.00 (Presto) | 対応 |
テスト結果ではまったく対応してないのがIE8、ベンダープレフィックスを付けなければ駄目なのがFirefox3.6、残りのブラウザは最新版を使えば標準で対応してることが判明した。（ここには載せてないけど、同じWebkitのSafariも標準対応してる模様。）
というわけで2011年1月現在においてborder-radiusを使いたいなら「IEへの対応は諦め（るか別の手段をとって）、それ以外には普通のborder-radius記述とFirefox用の『-moz-』を併用する。煩雑になるのが嫌なら『-moz-』も記述せずにFirefoxの対応を待つ」あたりがいいんじゃないかな、と感じた。IEが非対応なので商用サイトでは（見栄えを同じにしたいなら）まったく使えないだろうけど、個人サイトで割り切って使うならそう悪くない対応度になったと言えるんじゃなかろうか。
この記事へのコメント
コメント機能を利用するにはログインする必要があります。「Disqus」または「Twitter」「Google」「Facebook」などのアカウントが使用できます。