[gameover]

Use spiffy corners. It's pure css and fastest stable solution:

www . spiffycorners . com

[suedenem]

Spiffy Corners introduces a lot of extraneous (X)HTML into documents. It can be difficult to generate on the fly (if working with dynamic content) and can cause code to become unwieldly.

There are a few JS solutions which do the job well, Nifty Cube (IMO) being the pick of the bunch:

Nifty Corners Cube - freedom to round

Of course, the rounded corners aren't available to those who have chosen to disable JS, but it degrades well. It works on the same principle as Spiffy, but manipulating the DOM dynamically rather than explicitly adding the extra (X)HTML.

You just need to weigh up the pros and cons of each approach on a project-by-project basis.

[audax]

It is possible to do anti-aliased rounded corners with JQuery as well. A relatively simple solution, but just like all JS, it won't work unless JS is enabled. Nevertheless, it works nicely and is packed just below 10kb.

Search Google for "Blue Anvil Journal Anti-aliased Rounded Corners" and the first result should be a link to the post of the packed version of it. Then all you'll need is JQuery to get it to work. Use the packed version of that as well. jquery[dot]com

[dudefromthenet]

Originally Posted by suedenem

There are a few JS solutions which do the job well, Nifty Cube (IMO) being the pick of the bunch:

Nifty Corners Cube - freedom to round

The antialiasing quality of nifty corners is not very good. They only look good if the background color is similar to that of the box.

Generating corners with markup, like spiffy corners does, is not a good idea, because it will slow down rendering.

The solution I have posted before is the most flexible one I could find

[KarateRobot]

NiftyCorners Cube is very slick, but I have used it on a couple of sites for clients and found that it can seriously increase the load time of the page if you've got a lot of rounded areas to render. It also caused the page to flicker in IE, due to the delay in rendering the rounded corners.

So, for me the solution was to only use it on boxes that had no height or width specified, and then to use images on everything else.

If all the extra requests are an issue, you could try using css sprites.

Another gotcha with Niftycube is that if you're using a gradient background, you may see that the area behind the rounded corners isn't always the same color as the page background.