最新のブラウザはborder-radiusを実装

FirefoxがバージョンアップされてFirefox4になりましたが、他のブラウザも随時アップデートされていますね。
ホームページを製作しているとよく使うのが「角丸」です。

今まではInternetExplorerは使えなかったし、FirefoxとSafari、Google Chromeは別々にCSSを書かないといけませんでした。
上部の左右を20pxの角丸にする場合はこのように書いていました。

[css]
-moz-border-radius-topright:20px; /*Firefox*/
-moz-border-radius-topleft:20px; /*Firefox*/
-webkit-border-top-right-radius:20px; /*Safari Google Chrome*/
-webkit-border-top-left-radius:20px; /*Safari Google Chrome*/
[/css]

-moz-はFirefox用、-webkit-はSafariとGoogle Chrome用です。
各位置の指定の仕方が違うのでかなり面倒くさかったのです。

でも、最新のブラウザ（Firefox4、IE9、Safari）はborder-radiusが使えるようになったのでこのように書けば良くなりました。

[css]
border-radius: 20px 20px 0 0;
[/css]

数字は左上から時計回りです。左上、右上、右下、左下になります。

これでCSSを書くのが楽になりました。 個別に角丸を指定するのはこのように書きます。

[css]
border-top-left-radius:20px; /* 左上の角丸を指定*/
border-top-right-radius:20px; /*右上の角丸を指定*/
border-bottom-left-radius:20px; /*左下の角丸を指定*/
border-bottom-right-radius:20px; /*右下の角丸を指定*/
[/css]

各ブラウザでCSSの認識が統一されるのはウェブサイトを作るのにはとてもやりやすくなりました。
ただ、FirefoxとSafariは半強制的にアップデートされますが、IE9はXPでは使えないし、強制的にはアップデートされないし。
まだまだ、XPとIE6を使っている人が多いのでハッキングは必要ですね。