-webkit- and -moz-border-radius does not work on tables?

Question

This works

div {
  -moz-border-radius: 5px 5px 0 0;
  border:1px solid #000;
  margin:30px;
}

This does not work

table {
  -moz-border-radius: 5px 5px 0 0;
  border:1px solid #000;
  margin:30px;
}

Does anyone know how to use -moz and -webkit to work on tables?

Answer 1

5.6. Effect on Tables

The ‘border-radius’ properties do apply to ‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius properties to ‘table’ and ‘inline-table’ elements, but is not required to. In this case not only must the border radii of adjacent corners not intersect, but the horizontal and vertical radii of a single corner may not extend past the boundaries of the cell at that corner (i.e. the cell's other corners must not be affected by this corner's border-radius). If the computed values of the border radii would cause this effect, then the used values of all the border radii of the table must be reduced by the same factor so that the radii neither intersect nor extend past the boundaries of their respective corner cells.

The effect of border-radius on internal table elements is undefined in CSS3 Backgrounds and Borders, but may be defined in a future specification. CSS3 UAs should ignore border-radius properties applied to internal table elements when ‘border-collapse’ is ‘collapse’.