There are lots of different techniques for rounding corners. To name a few off the top of my head: tables with 4 images; styling the container and a header; doing that in JS; multiple backgrounds in CSS3 and finally browser specific CSS. I find myself just using
-webkit-border-radius because it's the easiest way. Of course any IE users won't see the effect.
What is the best way to do rounded corners? By best I mean cross browser and easy to implement.
Something else to think about:
As far as sticking with advanced methods, despite backward compatibility, looking forward it's important to remember (or so i've read) that in the future, party-specific attributes may not always stick around. So to be super safe, include this:
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
So it's basically like adding in all the various methods of opacity for all of the flavors of browsers but very forward thinking. The day browsers mostly support border radius using a basic
border-radius declaration, it will already work and you'll be able to strip out the old browser specific code.
I use border-radius for browsers that support it and for those that don't, I've been using this handy script: http://www.dillerdesign.com/experiment/DD_roundies/.
I'd say if you're going for A-grade support then background-images (in a sprite, of course) is the way to go. DD_roundies is nice and all but it's going to make pages even slower in IE. Larger sites that care about performance really should never use a JS method for simple layout issues.
On the other hand, I can highly recommend DD_roundies for smaller scale sites, especially ones with less complicated designs as it can save you a chunk of production time. Be sure to wrap the script tag in an IE conditional and be aware of what mode IE8 thinks it's in.
For references on efficient ways to code flexible rounded corners with images, I've found that the Modules section of OOCSS to be very good. You can find it here. And just in case you've never come across GitHub before, that's just the documentation. You'll need to download the OOCSS framework (it's small) to see the actual Modules page.
we're starting to use -moz/-webkit/border-radius on some elements in order to reward advanced browsers, with the thinking that it's not degrading the site. i really think it's a design problem, rather than a technology problem, at this point. a good strategy is to design in such a way that the lack of round corners will not take away from the design or impact usability, and then it can be added for browsers that support it.
if it has to have round corners in ie, then i would use background images in cases where you have fixed-width columns. it's simple to set up sprites that provide the widths you need, and then structure your css such that you have a simple way to apply the proper image positioning.
if you have a liquid layout or elements that must stretch, then i'd use js or absolute multiple elements in the div to set it up. it's never clean, though, so my first approach, again, would be to design around it.
Pure html and css. Nifty Corners. http://www.html.it/articoli/nifty/nifty1.html
curved-corner is nice too. I imagine it's similar to Roundies. I'm also keen on just not showing the rounded corners to IE6 and earlier, but you can't always do that.
For IE I use DD Roundies. Basicly you include an .js file and give a class to the div you want your rounded corners on. For example http://projects.webfizz.be/rounded/test.html
I also tried it out with an htc file: http://projects.webfizz.be/rounded/
Here you only have to add this to your css file:
-moz-border-radius:7px; -webkit-border-radius:7px; behavior:url(border-radius.htc);
Basically, the only guaranteed way you're going to get rounded corners for cross-browser is to use a DIV construction using background images for the corners. Although even this could have issues Pre-IE7.
I generally use -moz/-webkit in user interfaces where rounded corners don't really matter and where time is of the essence ;)