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

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.