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:
82bd38565cc98e654a7d32a053b4917d000
To this:
82bd38565cc98e654a7d32a053b4917d001
This prevented Bootstrap from overriding some borders with it’s own stylings. Here’s the CSS:
82bd38565cc98e654a7d32a053b4917d002
Here’s the HTML:
82bd38565cc98e654a7d32a053b4917d003
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).