[CSS]角丸をIE8以下でも利用できるようになるborder-radius.htcの使い方と注意点

IE8以下のバージョンで「角丸」を実現させる方法は、PIE.htc や IE-CSS3.htc などを使う方法もありますが、今回紹介させていただく border-radius.htc を使う方法もあります。

名前の通り border-radius のプロパティに特化した HTCファイルです。

border-radius.htc のダウンロード

以下のページより border-radius.htc のファイルをダウンロードします。

border-radius.htc の使い方

PIE.htc などと同様、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。

.box    {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
     
    /*PIE.htc を利用*/
	behavior:url("./border-radius.htc");
}

border-radius.htc のサンプル

以下のページに、border-radius.htc を利用した「角丸」のサンプルを掲載しています。
border-radius.htc のデモ

border-radius.htc の注意点

全体のデザインにも依りますが、結論から申し上げてあまり使いモノになりません > <;

#wrap とか #wraper に 背景色を指定したら動かない

border-radius.htc ですが、ページ全体を包んでいる #wrap とか #wraper などの要素に背景色（background:#fff など）が指定されていると、何故か正常に角丸が表示されません。

position:relative を書くと動かなくなる？？

PIE.htc を利用する際に、HTCファイルが動いてくれない時は要素に position:relative を書けば動くかも？！？！ と紹介しましたが、border-radius.htc の場合は position:relative を書くと逆に動かなくなるかも？！？！

四隅に半径を個別に指定できない

以下のように、5px 10px 20px 30px と四隅に半径を個別に指定しても反映されません。

.box	{
	-moz-border-radius:5px 10px 20px 30px;
	-webkit-border-radius:5px 10px 20px 30px;
	border-radius:5px 10px 20px 30px;

	behavior:url(./border-radius.htc);
}

なぜか最初の1辺（左上の半径）が優先され、その値が四辺全てに適用されるようです。