Round table corners

Question

Can you help me with making the table corners round? I've tried the simple border-radius but this just split the border in the corners. Is this caused by my browser (Firefox) or its a bug ? Jsfiddle - http://jsfiddle.net/vuys8eef/

Answer 1

You need to round corners for the first and last columns of your first and last row in your table.

Something like this:

table tr:first-child th:first-child {
    border-top-left-radius: 10px;
}


table tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

You can see your updated fiddle