Solution to: How do I add curved borders to a Bootstrap table?

After creating a striped table using Bootstrap 3, I decided that in this case the sharp corners of the table detracted from the design. Adding curved borders should be easy: table { border-radius: 5px; }. Not quite.

First, I discovered that the border-collapse: collapsed; CSS property negates any border-radius properties set for the table. I had to use border-collapse: separate;. Of course, this made the visible border with double in between cells. And that’s just ugly.

I found this conversation on Stack Overflow. Thanks guys, this helped me get started. One of the examples on that page was close to what I wanted, but using it in conjunction with the table and table-striped classes from Bootstrap, things didn’t quite work out.

Solution

A few tweaks to the CSS solved any issues I was having with Bootstrap. Specifically, I had to separate the border-radius properties on lines like this:

6432d4e7a5c28b31f3d7434552f2c7aa000

To this:

6432d4e7a5c28b31f3d7434552f2c7aa001

This prevented Bootstrap from overriding some borders with it’s own stylings. Here’s the CSS:

6432d4e7a5c28b31f3d7434552f2c7aa002

Here’s the HTML:

6432d4e7a5c28b31f3d7434552f2c7aa003

And here’s a link to how it looks on jsFiddle:

http://jsfiddle.net/drodrig/HaFH9/

Caveats

• Don’t use the Bootstrap table-bordered class. The table is already bordered. Using the class breaks things.
• I haven’t cross-browser tested this solution yet. You may need some -webkit- and -moz- prefixes for some browsers, I don’t know.
• My table had <tr> and <td> tags only. Other child objects may or may not work (I’m thinking <th>, specifically).