Question

I am trying to combine in a table rounded corners for td elements and border-bottom for tr elements, to get a tab-like look (I can’t change the html structure).

Demo: http://jsfiddle.net/VvdBQ/

Code:

table#one {width:100%;border-spacing:0;border-collapse:separate;}
tr {border-bottom:5px solid red;}
td {font-weight:bold;text-align:center;background:blue;border-radius:15px 15px 0 0;border:1px solid green;}

My issue (viewed in Chrome):

• with border-collapse:separate the corners are correctly rounded but I don’t see the bottom border
• with border-collapse:collapse it is the opposite

How can I get both the corners and the bottom border correct?

Answer 1

If you use border-collapse:separate; and also move the style all to the td you should be able to get what you want with this:

td {
    font-weight:bold;
    text-align:center;
    background:blue;
    border-bottom:5px solid red;
    border-top:1px solid green;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

Here a fiddle: http://jsfiddle.net/digthedoug/qjLyZ/