views:

65

answers:

1

There are many JavaScript, .htc, jQuery solution available to make round corner in IE 6,7,8.

http://www.dillerdesign.com/experiment/DD_roundies/ (It does not work in IE 8)

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

http://alt-web.com/DEMOS/CSS-Rounded-Corners.shtml

http://blue-anvil.com/jquerycurvycorners/test.html

http://code.google.com/p/jquerycurvycorners/

http://code.google.com/p/curvycorners/

http://fetchak.com/ie-css3/

http://www.netzgesta.de/corner/

http://www.curvycorners.net/

http://www.malsup.com/jquery/corner/

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

Which solution has fastest rendering. I tried some solutions but not all they takes time to render and till then in IE corner looks Angled. which looks odd.

Has anyone tried all?

Which solution will give fastest rendering time? or give me any tips to make rendering quickly?

And which solution generate semantically correct code to make corners round in IE?

In project it's not necessary i will always have need roundness on all corner every time. On some page I need corner round from right-top and right-bottom sometime its opposite.

And I will use round corner with or without both.

For Firefox, chrome , safari i will always use Vendor extensions. I will keep solution of IE in

<!--[if lt IE 9]>
 <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]-->

Which one solution would be better or within all linked?

Note: I always keep jQuery library in my projects.

+1  A: 

Hard to say from all of those to be honest, as many are very similar.

I'd avoid any jQuery solution as I think that it's best to keep isolated the fix for IE, and you can do that very well with an .htc file: hide it in a conditional comment and the other browsers won't even see it.

As an added bonus, it should still work with javascript disabled.

As far as performance goes, it's always svg so won't differ much - it's rather quick even on fairly "old" computers - I tried them on a P4 and it still was fine with 3 of them, almost instant rendering.

I used htmlremix's htc so far, but I see from your list that apparently somebody else took that and built another version with working drop shadow too: this one.

I'd definitely go for that.

Razor
+1 Thanks for answer but why jQuery solution is not a good idea if I'm already using jQuery on site?
metal-gear-solid