Border Radius of Table is not working

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