CSS3’s border-radius property and border-collapse:collapse don’t mix 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: 


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;
}

Published on Jun 25, 2019

Tags: The Ultimate CSS Tutorial for Beginner Programmers

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.

Jamie Munro
Jamie Munro

Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js, Knockout.js: Building Dynamic Client-Side Web Applications, 20 Recipes for Programming MVC 3, and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years.

Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers.

Tutorials

Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.

Front-End

Server-Side

Database