Table's border-radius does not function as expected - html

Question

I want to add a border radius around the entire table. But the following code is not working in both the latest versions of Firefox and Google Chrome.
table {
border-spacing: 0;
width: 600px;
margin: 30px;
border: 1px solid #CCCCCC;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 1px #CCCCCC;
}
table th:first-child {
border-radius: 6px 0 0 0;
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
}
table th:last-child {
border-radius: 0 6px 0 0;
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
}
table td:first-child,
.bordered th:first-child {
border-left: medium none;
}
table th {
background-color: #DCE9F9;
background-image: -moz-linear-gradient(center top, #F8F8F8, #ECECEC);
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#ECECEC), color-stop(.4, #F8F8F8));
border-top: medium none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
table td,
table th {
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
padding: 10px;
text-align: left;
}
<table class="bordered">
<thead>
<tr>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
</tr>
</tbody>
</table>
JSFiddle

Answer 1

border-collapse: separate !important; worked.
Thanks.
HTML
<table class="bordered">
<thead>
<tr>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
<th><label>Labels</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
<td><label>Value</label></td>
</tr>
</tbody>
</table>
CSS
table {
border-collapse: separate !important;
border-spacing: 0;
width: 600px;
margin: 30px;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #ECECEC;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #ECECEC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#ECECEC));
background-image: -webkit-linear-gradient(top, #F8F8F8, #ECECEC);
background-image: -moz-linear-gradient(top, #F8F8F8, #ECECEC);
background-image: linear-gradient(top, #F8F8F8, #ECECEC);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered th:only-child{
-moz-border-radius: 6px 6px 0 0;
-webkit-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0 6px;
-webkit-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}
jsFiddle

Answer 2

It works, this is a problem with the tool used: normalized CSS by jsFiddle is causing the problem by hiding you the default of browsers...
See http://jsfiddle.net/XvdX9/5/
EDIT:
normalize.css stylesheet from jsFiddle adds the instruction border-collapse: collapse to all tables and it renders them completely differently in CSS2.1:
The separated borders model
The collapsing border model
Differences between the 2 models can be seen in this other fiddle: http://jsfiddle.net/XvdX9/11/ (with some transparencies on cells and an enormous border-radius on the top-left one, in order to see what happens on table vs its cells)
In the same CSS2.1 page about HTML tables, there are also explanations about what browsers should/could do with empty-cells in the separated borders model, the difference between border-style: none and border-style: hidden in the collapsing borders model, how width is calculated and which border should display if both table, row and cell elements define 3 different styles on the same border.

Answer 3

This is my solution using the wrapper, just removing border-collapse might not be helpful always, because you might want to have borders.
.wrapper {
overflow: auto;
border-radius: 6px;
border: 1px solid red;
}
table {
border-spacing: 0;
border-collapse: collapse;
border-style: hidden;
width:100%;
max-width: 100%;
}
th, td {
padding: 10px;
border: 1px solid #CCCCCC;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo Bar boo</td>
<td>Lipsum</td>
<td>Beehuum Doh</td>
</tr>
<tr>
<td>Dolor sit</td>
<td>ahmad</td>
<td>Polymorphism</td>
</tr>
<tr>
<td>Kerbalium</td>
<td>Caton, gookame kyak</td>
<td>Corona Premium Beer</td>
</tr>
</tbody>
</table>
</div>
This article helped: https://css-tricks.com/table-borders-inside/

Answer 4

A note to this old question:
My reset.css had set border-spacing: 0, causing the corners to get cut off. I had to set it to 3px for my radius to work properly (value will depend on the radius in question).

Answer 5

Just add overflow:hidden to the table with border-radius.
.tablewithradius {
overflow:hidden ;
border-radius: 15px;
}

Answer 6

<div class="leads-search-table">
<div class="row col-md-6 col-md-offset-2 custyle">
<table class="table custab bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Parent ID</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>News</td>
<td>News Cate</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <span class="glyphicon glyphicon-remove"></span> Del</td>
</tr>
<tr>
<td>2</td>
<td>Products</td>
<td>Main Products</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <span class="glyphicon glyphicon-remove"></span> Del</td>
</tr>
<tr>
<td>3</td>
<td>Blogs</td>
<td>Parent Blogs</td>
<td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <span class="glyphicon glyphicon-remove"></span> Del</td>
</tr>
</table>
</div>
</div>
Css
.custab{
border: 1px solid #ccc;
margin: 5% 0;
transition: 0.5s;
background-color: #fff;
-webkit-border-radius:4px;
border-radius: 4px;
border-collapse: separate;
}

Answer 7

No need to worry..Just add
overflow: hidden;
and then apply border radius. Border radius will be applied to all the four sides.

Answer 8

To use border radius I have a border radius of 20px in the table, and then put the border radius on the first child of the table header (th) and the last child of the table header.
table {
border-collapse: collapse;
border-radius:20px;
padding: 10px;
}
table th:first-child {
/* border-radius = top left, top right, bottom right, bottom left */
border-radius: 20px 0 0 0; /* curves the top left */
padding-left: 15px;
}
table th:last-child {
border-radius: 0 20px 0 0; /* curves the top right */
}
This however will not work if this is done with table data (td) because it will add a curve onto each table row. This is not a problem if you only have 2 rows in your table but any additional ones will add curves onto the inner rows too.
You only want these curves on the outside of the table.
So for this, add an id to your last row.
Then you can apply the curves to them.
/* curves the first tableData in the last row */
#lastRow td:first-child {
border-radius: 0 0 0 20px; /* bottom left curve */
}
/* curves the last tableData in the last row */
#lastRow td:last-child {
border-radius: 0 0 20px 0; /* bottom right curve */
}