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 -moz-border-radius and -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.

9 answers

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:

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.

Hey Jeff, even I'm doing the same, i.e. using border-radius for browsers that support it, for IE I'm using DD_roundies in a prototype for an app we are developing, I'm not yet sure how it's going to impact the actual development though the prototype testing has created no issues as yet.
I really hope so that development phase is not impacted, else I'll have to think of an alternate solution.
BTW all these rounded corner workarounds available, create a set of divs around the corners - to create the round curves, and these extra divs may be an hindrance — Andrews about 4 years ago

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.

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 ;)