IE9でのborder-radiusの指定

2010/09/23 @9:16 | 制作・運営・ノウハウ

IE9でCSS3のサポートも強化され、ようやくborder-radiusも使えるようになる。
IE9 Betaでは、W3Cの指定通りのプロパティでborder-radiusの指定ができる。

/* すべて一度に指定する場合（IE9とOpera向け）*/
border-radius: 4px;

/* 個別に指定する場合（IE9とOpera向け） */
border-top-left-radius: 4px;
border-top-right-radius: 3px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 3px;

/* すべて一度に指定する場合（Mozilla向け）　*/
-moz-border-radius: 4px;

/* 個別に指定する場合（Mozilla向け） */
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 3px;

/* すべて一度に指定する場合（Webkit向け）　*/
-webkit-border-radius: 4px;

/* 個別に指定する場合（Webkit向け） */
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 3px;

現状、Webkit（SafariとChrome）やMozilla（Firefox）では接頭辞付きのプロパティでサポートされているため、上記のように複数記述が必要になります。また、接頭辞付きのプロパティは将来的にサポートされなくなる可能性があるので、同時に正式なプロパティも記述しておいたほうが良いようです。
【参考】 ベンダー接頭辞は使ってもよいか（ミツエーリンクス　Web標準Blog）

ちなみにIE6〜8ではborder-radiusはサポートされていないため、IE6〜8でも同じ表示をさせたい場合、このプロパティは使えません。IE6〜8では思い切って諦めるか背景画像を使うのが現実的なのでしょう。jQueryを使って実装する方法などもありますが、表示が遅くなったりするので個人的には好きではありません。