どや！？css3の角丸（border-radius）に関する情報を掻き集めた

CSS3を使えば画像を使わずに角丸を表現する事が出来ます。
今更ですが、情報を集めたので記事にします。
　

角丸を表現する

今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来てしまうプロパティです。
CSS3 はまだ仕様が確定しているわけではないので、最近のモダンブラウザは独自実装という形で実装しています。そのため、Firefox なら -moz- の、Safari や Google Chrome なら -webkit- のプレフィクスを用いて指定します。
SafariやChrome、はプレフィクス無しで border-radius を実現していました。

<div class="demo">
	css3で角丸を表現する
</div>

.demo{
	-moz-border-radius: 5px;	/* firefox */
	border-radius: 5px;			/* CSS3 */
	margin: 20px;
	padding: 10px;
	width: 300px;
	color: #ffffff;
	background: #666666;
	}

特定部分だけを指定

下記の方法で、特定部分だけを指定することができます。

<div class="TopLeft">
	css3で左上の角丸を表現する
</div>

.TopLeft{
	-moz-border-radius-topleft: 30px;	/* firefox */
	border-top-left-radius: 30px;		/* CSS3 */
	}

<div class="TopRight">
	css3で右の角丸を表現する
</div>

.TopRight{
	-moz-border-radius-topright: 30px;	/* firefox */
	border-top-right-radius: 30px;		/* CSS3 */
	}

<div class="BottomLeft">
	css3で左下の角丸を表現する
</div>

.BottomLeft{
	-moz-border-radius-bottomleft: 30px;	/* firefox */
	border-bottom-left-radius: 30px;		/* CSS3 */
	}

<div class="BottomRight">
	css3で右下の角丸を表現する
</div>

.BottomRight{
	-moz-border-radius-bottomright: 30px;	/* firefox */
	border-bottom-right-radius: 30px;		/* CSS3 */
	}

IEでも角を丸くしたい場合

IEの独自拡張プロパティbehavior（ビヘイビア）を使う

①border-radius.htc

<div class="IE">
	border-radius.htcでIEでも角丸を表現
</div>

.IE{
	-moz-border-radius: 10px;	/* firefox */
	border-radius: 10px;		/* CSS3 */
	behavior: url(border-radius.htc);	/* IE */
	}

　
②ie-css3.htc
→角丸（border-radius）、box-shadow（ボックスのシャドウ）、text-shadow（テキストのシャドウ）をサポートしている

<div class="IE2">
	ie-css3.htcでIEでも角丸を表現
</div>

.IE2{
	-moz-border-radius: 15px;	/* firefox */
	border-radius: 15px;		/* CSS3 */
	behavior: url(ie-css3.htc); /* IE */

	-moz-box-shadow: 10px 10px 20px #000;	/* Firefox */
	-webkit-box-shadow: 10px 10px 20px #000;/* Safari */
	box-shadow: 10px 10px 20px #000;		/* CSS3  */
	}

behavior（ビヘイビア）のデメリット

• 単純なブロック要素を角丸にするのであれば良いのですが、入れ子になっていたり、議事要素で切り替えたりするのであればダメです
• Webサーバーがhtcに対応した設定になっている必要がある
• IE8での border-radius.htc の多用はエラーになる
• 縦のpaddingがIE以外のブラウザと異なる
• 上記プロパティを設定したブロックに line-height が設定されていると、IE6で要素の下端が下に伸びます。上位要素（body等）に line-height を指定している場合は、line-height: normal;を指定してあげればOK。

感想

ちょっとした装飾には最適かも^^b
ただ、デメリットを把握したうえで使うかどうか考えたほうが良さそうです。
角丸メインのサイトで使いすぎると、IEは確実にフォローしきれないと感じました。
IEも完全にサポートしてくれれば、効率は格段にアップしそうですね。
いつになるのかなぁ。