[CSS]CSS3で角丸

Leopardに標準のSafari3やiPhone、iPod touchに搭載されているSafariはCSS3の一部機能が使えるらしい。
その一つ角丸ボックスの表示について覚え書き。

今まで角丸ボックスというとイメージを用意してtableだったりdivだったりでゴチャゴチャ書かなきゃいけなかったのですが、CSS3からはボックスの角を丸くするCSSプロパティを記述するだけで表示してくれるようになります。

-webkit-border-radius: 8px;

Safari3で角丸になります。

ちなみに上の方法はSafari3などで使われているwebkit(W3C CSS3準拠)で表示する方法。
CSS3にはMozilla系ブラウザ(Firefox等)独自の角丸CSSプロパティも存在するのでこっちもメモ。

-moz-border-radius: 8px;

FirefoxなどMozilla系ブラウザで角丸になります。

で、両方書けばこの通り。

モダンブラウザで角丸になります。

IE?そんなのシラネ(笑 (とりあえず6はだめっしょ)

コメントを残す