IE で border-radius を使う方法

CSS3 から使えるようになった border-radius を IE でも使う方法です。IE でも使うと言っては語弊がありますが、IE でも角丸を表現する方法です。それは Blog で使っている方法をメモ。

IE で角丸を表現する方法

ご存じの通り、IE6、IE7、IE8 では CSS3 の border-radius を使って角丸を表現することはできません。んじゃ、どうやって角丸を実現するのかというと次のような方法があります。

border-radius.htc を使う: VML を利用して、behavior を使って border-radius を実現する方法
border-radius.js を使う: JavaScript を使って border-radius を実現する方法
JQuery Corner を使う: jQuery Corner という jQuery プラグインを使って border-radius を実現する方法

さくっと Google 先生に聞いたところ、3つくらいやり方があるようでした。で、うちのブログでは3つめの、JQuery Corner を使いました。

border-radius.htc のダメなところ

さっと検索したところ、border-radius.htc が一番簡単に角丸を実現出来そうだったのですが、如何せん互換モードでしか動かない。。うちのサイトは、HTML5 の標準モードで作っているので、これが動かない！！

ちなみに、HTML5 で標準モードは DOCTYPE に html を与えてやればいいだけらしいです。

<!DOCTYPE html>

まぁ、互換モードでしか動かないとなると、使えないということで、これは×。

ってか、標準モードでも動くように手をいれてる人発見

VML を利用して IE で border-radius が使えるようにする」れぶろぐ

これ、試したらうまくいくのかな？やってないけど。

border-radius.js のダメなところ

border-radius.js は、javaScript を使って角丸を表現することができるらしいです。適用したい要素の class 属性に html5jp-border-radius という値を指定すればよいらしいですが、これがめんどくさい。というか、そもそも IE8 でうごかないという。。。自宅の環境、IE8 しか入ってないし、確認できないと意味ないじゃん。。ということでこれも×。

ということで、最後の頼みの綱 jQuery

jQuery 大好きな僕としては、これに賭ける！ということで導入してみました。

JQuery Corner

これを使うと、角丸にしたいところを下みたいな感じでやれちゃう。

$("div").corner();

ただ、要注意なのが、白背景のブロック要素に対して行うと、ボーダーが見えなくなっちゃうので角丸になってるかよく分かりません。。。ということで、どうすればいいかというと、外側に一つラッパーを作ってやってラッパーの背景にボーダー色を設定し、ラッパーとのマージン差で線ぽっく見せると。

こんな感じ。

jQuery Corner の使用例

var $wrapper = $("<div/>");
$(".hoge").wrap($wrapper);
$(".hoge").css("margin", "0");
$wrapper = $(".hoge").parent();  // なぜかこれが必要。。。
$wrapper.css("background-color", "ここに線の色を指定する");
$wrapper.css("margin", "0");
$wrapper.css("padding", "1px");
$wrapper.corner("5px");
$(".hoge").corner("5px");

適当に div タグ作って角丸にしたい要素（.hoge）に wrap します。んで、角丸にしたい要素の margin を 0 に設定してラッパーとの間をなくします。

その後、JQuery Corner の corner を使ってラッパーと角丸にしたい要素の両方を丸くした後、padding で線の太さ分だけずらします。

一応、うまくいってます。下の枠が一応テスト用ということで。

テスト要素

ほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげ

JQuery Corner についてもう少し

ダウンロード