IE8以前で角丸を簡単にborder-radiusを使って実現するPIE.htc

今までは角丸のDesignは画像を使って表現していたけど、このLibraryを使えば他のCSS3対応Browserと同様にCSSだけで表現できる。

• CSS3 PIE: CSS3 decorations for IE

HTCはDynamic HTML (DHTML) Behaviorsと呼ばれるIE独自に実装された仕組み。中身はHTMLとJavaScript。IE全盛期の頃はTableのthをClickするだけで、昇順、降順に並び替えるhtcが流行った時期もある。詳しくは下記Siteで。

• HTML Components を使った DHTML Behaviors のスクリプトによる実装

 

最近作ったteniteo.jpでも角丸部分はこのLibraryを使っている。

• teniteo[テニテオ]

次のように絶対Pathとbackground-colorを指定しないと、うまいこと表示されなかった。

.corner {
    background: #fff;
    behavior: url(/wp-content/themes/hoge/_inc/PIE.htc);
}

画像を使わずborder-radiusとborder-colorで調整出来るので、とっても楽ちん。