Helping you solve those tough coding problems!

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

Published on Jun 25, 2019 by Jamie Munro

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:


table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}


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:


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

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

Tags: CSS | border-radius | border-collapse

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP