Background color of the table and round corners

Question

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

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 that I came up with. Use solution 2 , but I keep solution 1 here, because it might come in handy in some other situation to someone else.

Solution 1: Display

Changing the td display to inline-block does the trick, but may affect 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 the modified 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 the modified JSFiddle for solution 2.

If it does not work in all browsers, you should know that there are specific browser settings, such as -moz-background-clip and -webkit-background-clip , which use a different set of values ​​(they basically skip the field from the border-box , padding-box and content-box )

Answer 2

This is because

 border-collapse: separate; 

does it like that. Tables are not exactly prima donna when styling, I recommend that you use the <div> tags instead.

TRY THIS: http://jsfiddle.net/hXMLF/9/

Answer 3

Check out this link. You can generate CSS for a 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>