Which Javascript solution(Not .htc) can really make Antialiased round corner in IE7 and 8?

Question

Which JavaScript solution (Not .htc) can really make Anti aliased round corner in IE7 and 8 like CSS3 gives in supported browsers?

I tried many

http://www.ruzee.com/blog/ruzeeborders/

http://blue-anvil.com/archives/anti-aliased-rounded-corners-with-jquery/

http://www.curvycorners.net/

All are claiming to give anti aliased corner but giving corners like this

But no one is giving anti aliased corner. if I need 10px round corner.

Answer 1

You can certainly make flexible elements with image round corners.

See this article.

Because CSS3 border-radius is now supported in many of the modern browsers, you could use that as your primary solution and provide a fallback for the ones that don't support it.

On a recent project, I created the website with border-radius and used the jQuery .wrap() for browsers that didn't support it. It looks something like this:

HTML

<div class="round">
    <p>Hi, I'm a paragraph</p>
</div>

CSS

.round {
    border: 1px solid red;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

jQuery

if ($.browser.msie) {
    $('.round').wrap('<div class="tl"><div class="tr"><div class="bl"><div class="br"></div></div></div></div>');
}

And you can then style the round corner elements as per the article above.