CSS3’s border-radius property and border-collapse:collapse don’t mix

Let’s explore an alternative way to achieve border-collapse:collapse with border-radius in CSS to have a collapsed, rounded corner table.

How can I use border-radius to create a collapsed table with rounded corners?

Making rounded corners can be accomplished using border-radius:10px. Some example CSS:

[code]
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}
[/code]

To reduce the CSS and require targeting a combination of table, th, and td tags it can be handy to apply border-collapse:collapse so the browser draws a single border and not one for each the table, tr, and td tags.

Solution to a collapsed rounded corner table

When applying the combination of collapse with the border radius, some td elements were not being rounded. The solution is to target the specific ones, in this case the first and last td elements:

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

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