What rounded corner approach should I take?

Question

So there's no shortage of information out there on rounded corners and I've been through much of it and I'm posting to get the opinions of the communities on this point.

My scenario is that we're developing a rounded corner dependent design, mainly used for interactions (<button> and <a>). We are going to use border radius for the good browsers on the block that play nice with it and then use the server to send down JavaScript to browsers that don't.

What I'm wondering is what to use to up scale the browsers that ignore border radius CSS? I need something that works on button as well as a, div etc. I've been looking at the following and have found that some don't play nice with <button>. Also the site already uses jQuery.

http://www.curvycorners.net/ - http://code.google.com/p/jquerycurvycorners/

http://www.html.it/articoli/niftycube/index.html

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

Edit: I've also looked at http://www.dillerdesign.com/experiment/DD%5Froundies/ and at this point it seems the strongest candidate to me.

Answer 1

They're all much the same. I've used the last one (http://www.malsup.com/jquery/corner/) and it works great. Almost certainly has more corner styles than you care about, but at 8KB, it's not too heavyweight.

Answer 2

Use the one that works and gets the project done on time. Beyond that you're not likely to get much useful feedback on this as they all suck from one standpoint or another depending on how you view images, javascript, semantics, adding extra tags to "make it work", etc.

Answer 3

I've had some experience with the Javascript methods described above and they all work great. Personally I would go for something that integrates well with existing Javascript frameworks, like JQuery (which would be my personal choice).

Applying the effect to a lot of elements can be very cumbersome for the browser in terms of memory usage however. I've had quite a lot of browser crashes due to me being too generous with applying corner effects.

Answer 4

Overall, you should just go with the -webkit-border-radius as well as the -moz-border-radius to support all Webkit and Mozilla browsers. To have a fix with IE, there is a javascript function to do that. Hope that helps!

Answer 5

spiffycorners.com has a 100% css approach that even works in IE6! This is what I use...

Answer 6

Have you looked at Stu Nicholis' CSS play? His Snazzy Borders and Krazy Korners are a nice cross-browser solution.