Table's border-radius does not function as expected

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

score 136 · Answer 1 · edited Mar 14 '14 at 18:15

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

border-collapse: separate !important; Yeah worked for me too. — Bipon Biswas, Jul 20 '17 at 05:59

FelipeAls · Accepted Answer · 2012-05-19T22:32:02.400

55

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:

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.

edited May 19 '12 at 22:32

answered May 19 '12 at 15:43

FelipeAls

21,711
8
54
74

Can you explain why normalize causes this problem? When I inspect the elements the fiddle, I can't find anything that would kill the border-radius. – Fresheyeball May 19 '12 at 15:59
Thanks. I also found the following solution. :) – Tapas Bose May 19 '12 at 15:59
@Fresheyeball I added links to documentation and a comparison. I'm glad I learned directly CSS a few years ago and didn't work in the field back when table layout were (to be) used and abused along with `spacer.gif` ;) – FelipeAls May 19 '12 at 22:33
7

`overflow` should be set to `hidden` if you want `border-radius` to affect the content – Boris D. Teoharov Dec 30 '13 at 13:28
@dudelgrincen It'll "cut" rectangular backgrounds on cells, similar to a mask, good idea if you're sure nothing ever will have to display outside a table (simpler than border-radius on 4 corner cells). But I often have tooltips or even, in complex tables, dropdowns (filters, etc) – FelipeAls Dec 31 '13 at 00:03
1

@BorisD.Teoharov this should be included in the answer. Thank you. – Dylan Kerler Jul 22 '20 at 15:02

score 31 · Answer 3 · answered Oct 12 '18 at 08:47

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/

I had to add `border-radius: 6px;` to both the DIV and the TABLE since I did not want to use `overflow: auto` style on the DIV for some other reasons. Using `border-radius` on both TABLE and DIV makes `overflow: auto` unnecessary. — Roland Pihlakas, Sep 15 '21 at 15:57

score 12 · Answer 4 · edited Oct 04 '20 at 02:03

12

Just add overflow:hidden to the table with border-radius.

.tablewithradius {
  overflow:hidden ;
  border-radius: 15px;
}

edited Oct 04 '20 at 02:03

derloopkat

6,232
16
38
45

answered Oct 03 '20 at 23:43

Simo

129
1
2

4

This works, but adds a visual bug on the corners for me, where the borders are overflowing – Johan Aspeling Nov 19 '20 at 13:16

score 9 · Answer 5 · answered Dec 07 '15 at 20:15

9

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).

answered Dec 07 '15 at 20:15

Mackan

6,200
2
25
45

score 7 · Answer 6 · answered Jul 20 '17 at 06:03

<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> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></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> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></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> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></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;
}

There is CSS for the DIV missing in this answer. – Roland Pihlakas Sep 15 '21 at 15:59 — Roland Pihlakas, Sep 15 '21 at 15:59

score 5 · Answer 7 · answered May 29 '21 at 16:56

5

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

answered May 29 '21 at 16:56

Ayimen Latheef

59
1
1

1

Welcome to Stackoverflow! Please take the time to absorb SO's [recommendations addressed to new users](https://stackoverflow.com/help/how-to-ask). You may take the [tour](https://stackoverflow.com/tour); then do read what's [on-topic here] (https://stackoverflow.com/help/on-topic) – Sourcerer May 29 '21 at 18:39
Thanks for answer. But I am sorta clueless in CSS. I know the basics. But IDK why we should apply `overflow: "hidden"`. Can you say why? – Kasir Barati Jul 11 '22 at 06:53

score 2 · Answer 8 · answered Sep 07 '20 at 15:20

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

Table's border-radius does not function as expected

8 Answers8

Linked

Related