ちゃんと書いてる余裕ないけれどメモ程度にざっと
ついにIE9でサポートされた角丸
しかし普及し切るまで3年ぐらいかかるかな
でもそれまで待てない
IEでborder-radiusサポートするjavascriptのライブラリいろいろ試したけどどれも決め手にかける
角丸の描画が汚かったり内部の背景色をロールオーバーで変更するようにしていると破綻したり
で、結局自力で実装することにしたんだけどこんな感じ
角が丸くならない部分にだけ画像で角丸のボーダー書いて上から重ねる
これが一番簡単できれいだと思う
直線部分はcssでかいて角だけ画像かぶせる
例えば左上の角でボーダーの太さが3pxだったら
#jquery 使用
$('div').css({position : 'relative'}).append('<img src="top-left.png" style="position:absolute;top:-3px;left:-3px;" />');
これを4つ角に対してやればいい
角丸にしたいボックスのpositionに値を設定してその内部に追加する角丸画像の起点にするのが重要
そうすればあとは4つの角からボーダーの幅の分だけ外側にずらしてあげればいい
もちろんボーダー色、幅の変更には耐えられないけど決め打ちの場合はこの方法がいいんじゃないかと
ロールオーバーとかでボックス内の背景色変える場合はその分の角丸画像も用意しないとだけだめどね
ご参考に