IE9でのborder-radiusの指定

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を使って実装する方法などもありますが、表示が遅くなったりするので個人的には好きではありません。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です