border-radios.htcはいまいち使えないことが分かったのでメモです。
Borderのコーナーを角丸にする方法
CSS3では[border-radius]という記述があるので簡単に実現できます。
forefoxやwebkit系(safari,chrome)でも対応させるためには、以下の通り。
[code]
moz-border-radius: 5px; //for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px; //CSS3
[/code]
ただし、これではIE8以前には対応してません。
IE8以前のIE6,7,8に対応させるためには、「border-radius.htc」というものがありました。
これはIEのCSS拡張で、CSS内でjavascriptが呼び出せる仕組みになります。
以下、参考サイトです。けっこう記事にされている方いますね。
[CSS3による角丸表現の決定版？の htcファイル「border-radius.htc」]
[border-radius.htc使ってみた – 放置演算子]
[IE で border-radius を使う方法 – それはBlog]
上記の方は、3種類比較されていました。
- border-radius.htc を使う
VML を利用して、behavior を使って border-radius を実現する方法- border-radius.js を使う
JavaScript を使って border-radius を実現する方法- JQuery Corner を使う
jQuery Corner という jQuery プラグインを使って border-radius を実現する方法
「border-radius.js」というJSもあるようですが、IE８は未対応とのことです。
さらに、「jQuery Cornerを使う」とありましたので実装テストしてみました。
これを使えばできそうかと思いましたが、FORM要素のINPUTタグには使えませんでした。
border-radius.htcを使ってみる
border-radius.htcのダウンロード先はこちら
[curved-corner – CSS curved corner – Google Project Hosting]
http://code.google.com/p/curved-corner/
記述方法はこちら
[code]
moz-border-radius: 5px; //for Firefox
-webkit-border-radius: 5px;//for Safari,chrome
border-radius: 5px; //CSS3
behavior: url(border-radius.htc);//for IE
[/code]
border-radius.htcの動きとしては、
moz-border-radius、-webkit-border-radius、border-radiusで指定されている値を取得してるようです。
FORM要素のINPUTタグでも使える！と喜んでみたものの残念な結果に。
こちらのブラウザ（IE8）で確認したところ、合計で30個まではOKで31個以上のborder-radius.htc呼び出しがあった時にエラーとなっています。それも意味不明なJavascriptエラーです。
「エラー：引数が無効です」
デザイン的に細かいところまで角丸を実現させようとするborder-radius.htcではかなり厳しいですね。
一番単純な方法としては、Borderを無くして、背景に角が丸い画像を置くのが一番良いかもしれませんね。