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を使って実装する方法などもありますが、表示が遅くなったりするので個人的には好きではありません。
2010年9月23日に公開され、2017年11月23日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @[email protected] 、Twitter @rriver 、またはFacebook までご連絡ください。