CODEWITHSUNDEEP
htmlcsscss-tables
Christophe
Christophe

Reputation: 28154

border-bottom + rounded corners in a table

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):

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

Upvotes: 1

Views: 6211

Answers (1)

DigTheDoug
DigTheDoug

Reputation: 1440

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/

Upvotes: 1

Related Questions