table cell background color and round corners - html

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)

Answer 2

This happens because
border-collapse: separate;
makes it like that. Tables aren't exactly the prima donna at styling, I recommend You try to use <div> tags instead.
TRY THIS: http://jsfiddle.net/hXMLF/9/

Answer 3

Check this link. You can generate CSS for round corner cell.
http://cssround.com/
Example:
<div
style="
width:400px;
height:300px;
-webkit-border-radius: 0px 26px 0px 0px;
-moz-border-radius: 0px 26px 0px 0px;
border-radius: 0px 26px 0px 0px;
background-color:#C2E3BF;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;
-moz-box-shadow: #B3B3B3 2px 2px 2px;
box-shadow: #B3B3B3 2px 2px 2px;
">
Just modify width and height values to get what you need...
</div>