Table Cell Background Bleeds Through A Table With Rounded Corners

As can be seen on this demo, in which a table is set with round corners (specifically the top-right and bottom-left), those corners are breached by their contained cell's backgroun

Solution 1:

Add overflow: hidden; to the table's CSS rule to clip its inner content. The MDN reference states that:

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

As tables are considered block level elements, this rule applies.

To overcome inconsistencies with Gecko driven browsers (e.g. Firefox), apply display: inline-block as well.

---

See the updated demo on jsFiddle.

Solution 2:

may be this option help you

tabletheadtr:first-child td:last-child {
    border-radius: 01em00;
}

tabletbodytr:last-childtd:first-child {
    border-radius: 0001em;
}​

http://jsfiddle.net/ZFYvq/10/

Also, instead of the pseudo classes can use the classes and add them to the desired cell

Solution 3:

Demo Fiddle

You're better off wrapping the table in a div with the relevant border radius properties set, e.g:

div{
    border-top-right-radius: 1em; 
    border-bottom-left-radius: 1em; 
    overflow:hidden;
}

By setting the display property for the table to anything other than table you are breaking the specific layout rules which apply to table elements, which will produce often unforseen issues, like not working in IE. The above is the only truly cross browser semantic solution.

nb. To remove the thick border at the bottom of the table, add border-bottom:none; to the div class