「CSS3 〜border-radius〜」角丸表現

最近、いくつかCSS3で遊んでいたりします。
このブログのタイトル部分にも角丸を使用しています。

そのCSS3のプロパティが border-radius

今まで画像で角丸を表現していた部分を、CSS3のみで表現できるプロパティですね。
みんな大好き border-radius

実装可能ブラウザ

Safari
Google Chrome
Firefox
Opera

＜使い方＞

WebKitの場合

-webkit-border-radius: 5px;
ただし、Google Chrome4では、border-radius: 5px;でも使用可能

各角ごとに設定することも可能

• -webkit-border-top-left-radius: 5px;
• -webkit-border-top-right-radius: 5px;
• -webkit-border-bottom-right-radius: 5px;
• -webkit-border-bottom-left-radius: 5px;

Firefoxの場合

-moz-border-radius: 5px;

各角ごとに設定することも可能

• -moz-border-radius-topleft: 5px;
• -moz-border-radius-topright: 5px;
• -moz-border-radius-bottomleft: 5px;
• -moz-border-radius-bottomright: 5px;

Opera10.50の場合

border-radius: 5px;

IEに実装させたい場合は、JSを使えば出来るようです。
border-radius.js
※やったことがないので、参考までに。
対応ブラウザは以下

• Internet Explorer 6, 7
• Firefox 2.0以上
• Opera 9.0以上
• Safari 3.0以上
• Google Chrome 0.3以上

正確には、CSS3の草案を読んでみてくださいね。

「border-radius: 0.5em 2em 0.5em 2em;」など、こういう書き方も出来るのかな・・・？
やったことないから分からないですが･･･今度試してみよう。

*1

ちなみに、このはてブは、FF3.6とSafari4とGoogle Chrome4で確認しています。
変なところあったら教えてください。

*1:追記：普通に出来ました^^;