【CSS】IEでもできる角丸を表現する方法

角丸は border-radius プロパティを使うことで表現することができますが、
ブラウザ毎に指定の方法が違います。
そしてIEではそのままでは角丸が使えなかったりします。。

今回は Firefox、Safari、Chrome、IEで使える角丸表現を紹介します。

border-radius	上下左右の角丸を指定するプロパティです。

CSSで角丸を表現する

HTML

<div class="radius box">角丸ボックス</div>

CSS

.radius {
	-moz-border-radius: 10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari and Chrome */
	border-radius: 10px;
	behavior: url(border-radius.htc); /* IE */
}
.box {
	width: 300px;
	margin: 10px;
	padding: 10px;
	background: #eee;
}

これで角丸ボックスができました。

IEでも角丸を表現できるようにするには？

上のソースで

なんてソースがありましたが、これがIEでも角丸を表現できるようにする魔法の１行です。
しかしこれだけでは動きません！

border-radius.htc とは、Google Codeで配布されているhtcファイルです。
http://code.google.com/p/curved-corner/

上のサイトからダウンロードしたファイルを、CSSと同じ階層にアップロードした後
CSS内に behavior を記述することでIE上にも角丸が現れます。

角丸を四隅ごとに半径を指定する

border-radius は、上下左右それぞれの角の半径を指定することもできます。

border-top-left-radius: 10px;     /* 左上 */
border-top-right-radius: 10px;    /* 右上 */
border-bottom-right-radius: 10px; /* 右下 */
border-bottom-left-radius: 10px;  /* 左下 */

Firefox向け角丸の指定

-moz-border-radius-topleft: 10px;     /* 左上 */
-moz-border-radius-topright: 10px;    /* 右上 */
-moz-border-radius-bottomright: 10px; /* 右下 */
-moz-border-radius-bottomleft: 10px;  /* 左下 */

Safari、Chrome向け角丸の指定

-webkit-border-top-left-radius: 10px;     /* 左上 */
-webkit-border-top-right-radius: 10px;    /* 右上 */
-webkit-border-bottom-right-radius: 10px; /* 右下 */
-webkit-border-bottom-left-radius: 10px;  /* 左下 */

角丸の画像化が大変 or 可変型のサイトでは border-radius を使うといいですね。