先日、リニューアル中のサイトの中で、枠の角を丸くしてくれないか？とクライアントより依頼され、本アップの日も近いので、どうしようかと。
通常、枠の角丸を表現するには、画像で角丸を作成CSSで背景に設定するというのが定番です。
しかし、CSS3では「border-radius」というプロパティを使えば簡単に角丸が表現できます。
さらに、ドロップシャドウや背景のグラデーションなど、今まで画像でしかできなかった表現がCSSで簡単にできるなんて、便利な世の中になったもんだ。
しかし、ブラウザの化石、IE（インターネットエクスプローラー）がCSS3に対応していないもんだから困った。
次期IE9はCSS3にやっと対応しているようだが、IE6みたいに何年も呪縛に苦しめられるのだろう。
しかし、ネットで調べるとそんなIEでもCSS3が使えるようです。
「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」にあるように「PIE.htc」を使えば簡単にIEでもCSS3が使える優れものだそうです。、「PIE.htc」のダウンロードはこちらから
方法はいたって簡単。
まず、角丸にするクラス（またはID）に
border-radius: 10px;←数値はお好みで。
さらにFirefox用
-moz-border-radius: 10px;
そして、Safari,Chrome用
-webkit-border-radius: 10px;
これで、モダンブラウザは角丸になります。
あ、Operaは9だと反応しなかったのですが、10にアップグレードしたら表示されたので、良しとしました。
で、ここからがIE用です。
上記の「PIE.htc」をダウンロードして解凍したファイルをhtmlファイルに入れます。
私はフォルダ名を「ie_css3」して「css」フォルダと同階層に設置しました。
html/┬css/base.css
├ie_css3/PIE.htc
おそらく、CSSフォルダにPIE.htcを入れても使用できると思います。
上記のスタイルシートの最後に
behavior: url(../ie_css3/PIE.htc); ←パスはPIE.htcの設置場所にあわせてください。
これだけ。
簡単だな～。と思ってローカルでプレビューするも反応なし、仕方がないので、一度アップしてみるときちんと角丸になっていてちょっと感激！
参考までにスタイルシートはこんな感じ。
.box {
border: 1px solid #CC3366;
border-radius: 10px; /* CSS3 */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari,Chrome */
behavior: url(../ie_css3/PIE.htc); /* IE */
}
これまで、実験的にローカルでしか使用していなかったCSS3ですが、これを機会に実践投入の機会が増えそうです。
「ここでき！」
※2012/10/13 修正
・フォントサイズを大きくしました。
・強調色を赤からオレンジに変更しました。