I am trying to make a table with rounded corners using the CSS3 border-radius property. The table styles I'm using look something like this:

table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px} 

Here's the problem. I also want to set the border-collapse:collapse property, and when that is set border-radius no longer works (at least in Firefox). Is there a CSS-based way I can get the same effect as border-collapse:collapse without actually using it?

Edits:

I've made a simple page to demonstrate the problem here (Firefox/Safari only).

It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well.

Summary of proposed solutions:

Specifying border width to 0 doesn't collapse the table.

The table's square corners overlap a surrounding div's rounded corners.

Bottom td corners still square after setting cellspacing to zero.