CSS border radius and border collapse

Question

I'm trying to have a table with a border-radius of 12px set in CSS. There is no border on the tr or td within the table, just the one border around the whole lot. I want the first row in the table to have a border-radius on the top 2 corners but not on the bottom 2 (so it is like a header for the table) which I have managed to do. However, this is creating a white border between the table and this first row - I want them to be right up to each other without the white border as the header row has a coloured background.

I've tried using border-collapse to do this, but this cancels out the border-radius on the overall table, making the header row rounded on the top 2 corners but inside a squared off table.

This is quite difficult to explain so an example can be found here. You can see the white border between the table and the row with the blue background.

Has anyone got any ideas how to get rid of the border without border-collapse? Thanks in advance

score 6 · Accepted Answer · answered Oct 24 '12 at 18:43

6

Try this:

<table class="admin" style = "border-spacing:0px;">

Obviously you can pull that inline style out into its own class, but I wanted to explicitly show you that border-spacing on the table is what you're after.

You should/could add some padding to the content inside the table if you don't want the text to be snug against the table's border.

answered Oct 24 '12 at 18:43

Matt

1,897
4
28
49

Thanks! Had never heard of `border-spacing` before! – crazyloonybin Oct 24 '12 at 18:51

score 0 · Answer 2 · answered May 02 '13 at 13:24

Here is my css with fix:

table {
    border:1px solid black;
    border-radius: 5px; //Any radius you want. It will work perfectly!
    border-spacing: 0;
}
table td:first-child, table td:not(:first-child):not(:last-child){
    border-right:1px solid black;
}
table tr:first-child td, table tr:not(:last-child) td {
    border-bottom:1px solid black;
}

table thead tr:first-child  td:first-child {
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
}

table thead tr:first-child  td:last-child {
    -webkit-border-top-right-radius:2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
}
table tbody tr:last-child  td:first-child {
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
}

table tbody tr:last-child  td:last-child {
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
}

CSS border radius and border collapse

2 Answers2

Linked