皆さんこんにちは、KUJIRAです。

　前回CSS3で角の丸い四角を作る記事を書きましたが、どうやらIEにいたっては、どんなにがんばってもこの設定は反映されないみたいです。

　そこで探したところ、こんなものがありました。 →　curved-corner

　早速ダウンロードコーナーから、「border-radius.htc」というファイルをダウンロードして試してみました。

　まず、ダウンロードしたhtcファイルをサーバー上の任意の場所に置き、以下のようにCSSファイルに書きます。

.example1-2{
　width:300px;
　height:300px;
　border:3px solid #FF00FF;
　background-color:#FFAAFF;
　border-radius:5px 20px 40px 60px / 15px 20px 140px 30px;
　-moz-border-radius:55px 20px 40px 60px / 15px 20px 140px 30px;
　-webkit-border-radius:5px 20px 40px 60px / 15px 20px 140px 30px;
　behavior: url(../css/htc/border-radius.htc);
}

　実行結果はこちら　（IEで見てください！）

　ポイントはbehavior: url(../css/htc/border-radius.htc);です。この記述でhtcファイルがborder-radiusの設定値を読み取りIE上で反映させてくれるというわけです。「url(～)」のところには、CSSファイルを適用させるHTMLファイルから見た、htcファイルの相対パスを入力しましょう。

　設定上の注意としては、

• -moz-border-radiusの値の一項目分の設定値を取得（たとえば、4つ設定値を記述したなら、左上分の設定値だけ取得する）
• 上記の設定がない、もしくは設定値が0だった場合、-webkit-border-radiusの値を同様に取得する。
• 更に、なければborder-radius、-khtml-border-radiusの順で値を同様に取得。

　の３点です。特に一項目分の設定しか読み取らず、その設定値を四隅に反映する点に気をつけてください。要するに四隅の角の半径が不均一な四角は作ることができません。

　詳しくはこのページをご覧ください。

　以上を理解した上で、一通りの設定が終わったらIEで確認してみましょう。設定が間違ってなければしっかりと丸角の四角形ができているはずです。

　それでは今日はここまで、KUJIRAでした。