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

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

Making rounded corners can be accomplished using 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.

Read the full example of CSS3’s border-radius property and border-collapse:collapse don’t mix

Written by

Author of 20 Recipes for Programming PhoneGap, 20 Recipes for Programming MVC 3, and Rapid Application Development with CakePHP.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade