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.

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-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;
}

jsFiddle

This question is related to html css html-table

User · Answer

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

User · Answer

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

User · Answer

Just add overflow hidden to the table with border-radius   tablewithradius     overflow hidden     border-radius  15px

User · Answer

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 */
}

User · Answer

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

User · Answer

border-collapse  separate  important  worked   Thanks   HTML   lt table class  bordered  gt       lt thead gt           lt tr gt               lt th gt  lt label gt Labels lt  label gt  lt  th gt               lt th gt  lt label gt Labels lt  label gt  lt  th gt               lt th gt  lt label gt Labels lt  label gt  lt  th gt               lt th gt  lt label gt Labels lt  label gt  lt  th gt               lt th gt  lt label gt Labels lt  label gt  lt  th gt           lt  tr gt       lt  thead gt        lt tbody gt           lt tr gt               lt td gt  lt label gt Value lt  label gt  lt  td gt               lt td gt  lt label gt Value lt  label gt  lt  td gt               lt td gt  lt label gt Value lt  label gt  lt  td gt               lt td gt  lt label gt Value lt  label gt  lt  td gt               lt td gt  lt label gt Value lt  label gt  lt  td gt                                       lt  tr gt       lt  tbody gt                       lt  table gt    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

User · Answer

lt div class  leads-search-table  gt                       lt div class  row col-md-6 col-md-offset-2 custyle  gt                       lt table class  table custab bordered  gt                       lt thead gt                            lt tr gt                               lt th gt ID lt  th gt                               lt th gt Title lt  th gt                               lt th gt Parent ID lt  th gt                               lt th class  text-center  gt Action lt  th gt                           lt  tr gt                       lt  thead gt                               lt tr gt                                   lt td gt 1 lt  td gt                                   lt td gt News lt  td gt                                   lt td gt News Cate lt  td gt                                   lt td class  text-center  gt  lt a class  btn btn-info btn-xs  href     gt  lt span class  glyphicon glyphicon-edit  gt  lt  span gt  Edit lt  a gt   lt a href     class  btn btn-danger btn-xs  gt  lt span class  glyphicon glyphicon-remove  gt  lt  span gt  Del lt  a gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt 2 lt  td gt                                   lt td gt Products lt  td gt                                   lt td gt Main Products lt  td gt                                   lt td class  text-center  gt  lt a class  btn btn-info btn-xs  href     gt  lt span class  glyphicon glyphicon-edit  gt  lt  span gt  Edit lt  a gt   lt a href     class  btn btn-danger btn-xs  gt  lt span class  glyphicon glyphicon-remove  gt  lt  span gt  Del lt  a gt  lt  td gt                               lt  tr gt                               lt tr gt                                   lt td gt 3 lt  td gt                                   lt td gt Blogs lt  td gt                                   lt td gt Parent Blogs lt  td gt                                   lt td class  text-center  gt  lt a class  btn btn-info btn-xs  href     gt  lt span class  glyphicon glyphicon-edit  gt  lt  span gt  Edit lt  a gt   lt a href     class  btn btn-danger btn-xs  gt  lt span class  glyphicon glyphicon-remove  gt  lt  span gt  Del lt  a gt  lt  td gt                               lt  tr gt                       lt  table gt                       lt  div gt                   lt  div gt    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

[html] Border Radius of Table is not working

HTML

CSS

The answer is

Examples related to html

Examples related to css

Examples related to html-table

Tags