Easy rounded corners working in IE7/IE8

This afternoon I was looking for a solution to (easily) add rounded corners into some elements of a website we are developing.

After having tried Curvycorners, jQuery Corners without any success (it was completely breaking the design under IE) I finally came to DD_roundies, which use Microsoft VML.

DD_roundies

DD_roundies is a really lightweight piece of code that will allows you to add rounded borders to nearly every element of you page by executing

DD_roundies.addRule('.roundify', '10px');

It’s smart enough to only apply if the Browser doesn’t support CSS border-radius styles, so you can just continue to work on your CSS for a proper implementation in other browser than IE.

Because it’s not a dream world

So this implementation is working perfectly in IE7 but doesn’t work in IE8, so if you don’t need IE8 specific functionalities I would recommend you to just add a meta in your head section to for IE7 compatibility mode in IE8.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible' />
&lt;meta <span class="nv">content</span><span class="o">=</span><span class="s1">&#39;IE=EmulateIE7&#39;</span> http-equiv<span class="o">=</span><span class="s1">&#39;X-UA-Compatible&#39;</span> /&gt;


or if you use HAML
%meta{:content => "IE=EmulateIE7", "http-equiv" => "X-UA-Compatible'"}

And off you go, now you can easily round everything like the cool kids ;)