table cell background color and round corners

Question

In the snippet http://jsfiddle.net/hXMLF/3/ you see a small border on the corners between the white border of the cells and the page background. How can I prevent it?

HTML

<table cellspacing="0" cellpadding="0">
  <tr>
      <td>Test</td>
      <td>Test</td>
  </tr>
</table>​

CSS

body {
    background-color: #efefef;
}

table {
    margin: 10px;
    border-collapse: separate;
    border-spacing: 0px;
}

td {
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

Answer 1

There are two solutions I came up with. Use solution 2 but I'm keeping solution 1 here as well because it may come in handy in some other situation to someone else.

Solution 1: Display

Changing td display to inline-block does the trick but may impact your actual content elsewhere...

td {
    display: inline-block; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

Here's your changed JSFiddle for solution 1.

Solution 2: Background clip (recommended)

But since you're using CSS3 anyway this is an even better solution:

td {
    background-clip: padding-box; /* this has been added */
    border-radius: 5px;
    background-color: #369;
    color: white;
    border: 5px solid white;
}​

Here's your changed JSFiddle for solution 2.

If it doesn't work on all browsers, you should be aware that there are browser specific settings as -moz-background-clip and -webkit-background-clip that use a different set of values (they basically omit box from border-box, padding-box and content-box)