The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

Question

I am trying to make a table with rounded corners using the CSS border-radius property. The table styles I'm using look something like this:

table { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

Here's the problem. I also want to set the border-collapse:collapse property, and when that is set border-radius no longer works. Is there a CSS-based way I can get the same effect as border-collapse:collapse without actually using it?

It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well.

Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through."

Specifying border width to 0 doesn't collapse the table.

Bottom td corners still square after setting cellspacing to zero.

The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.

I'd like to do this without JavaScript.

Couldn't you wrap the table in a div, set border-radius and "overflow: hidden" on the div? I just tested and that works fine, unless you need scrolling/expanding in a div that has fix width/height or its parents that do. — Ian
– Ian, Commented Aug 13, 2012 at 18:05

9 revs, 9 users 34% · Accepted Answer · 2022-12-16 14:11:09Z

I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child { border: 2px solid orange; border-bottom-left-radius: 10px; } table tr:last-child td:last-child { border: 2px solid green; border-bottom-right-radius: 10px; }

<table> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </table>

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.

A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

Instead of mucking around with the HTML, why not add border-spacing: 0; as a border style?
I was having an issue setting the background color of the TR tag instead of the TD tag. Be sure if you're striping your table that you're setting the background color of the TD not the TR.
Just adding border-spacing: 0; like Ramon recommend fixed it for me. Make sure you're adding the border-radius and border-spacing styles to the <th> or <td> elements, not <thead> or <tbody>.
I am using bootstrap and i have find the solution by using Ramon's advice, like this: border-spacing: 0; border-collapse: separate;

4 revs, 3 users 55% · Accepted Answer · 2021-01-25 17:20:41Z

The following method works (tested in Chrome) by using a box-shadow with a spread of 1px instead of a "real" border.

 table { border-collapse: collapse; border-radius: 30px; border-style: hidden; /* hide standard table (collapsed) border */ box-shadow: 0 0 0 1px #666; /* this draws the table border */ } td { border: 1px solid #ccc; }

<table> <thead> <tr> <th>Foo</th> <th>Bar</th> </tr> </thead> <tbody> <tr> <td>Baz</td> <td>Qux</td> </tr> <tr> <td>Life is short</td> <td rowspan="3">and</td> </tr> <tr> <td>Love</td> </tr> <tr> <td>is always over</td> </tr> <tr> <td>In the</td> <td>Morning</td> </tr> </tbody> </table>

This is the only thing that has worked for me. It is difficult to get the right color on the table border though.
It is not usable if your table has different background color than the surrounding area.
@g.pickardou that problem can be handled by adding 'overflow: hidden' onto table element.
box-shadow makes the table larger and so the sides get cut off now.
Its extremely hard to use, especially if you need to use rounded borders tds. It might be suitable only for a rounded able, or rounded trs

8 revs, 8 users 26% · Accepted Answer · 2023-03-05 20:24:32Z

If you want a CSS-only solution (no need to set cellspacing=0 in the HTML) that allows for 1px borders (which you can't do with the border-spacing: 0 solution), I prefer to do the following:

Set a border-right and border-bottom for your table cells (td and th)
Give the cells in the first row a border-top
Give the cells in the first column a border-left
Using the first-child and last-child selectors, round the appropriate corners for the table cells in the four corners.

See a demo here.

Given the following HTML:

See example below:

 table { border-collapse: separate; border-spacing: 0; min-width: 350px; } table tr th, table tr td { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 5px; } table tr th:first-child, table tr td:first-child { border-left: 1px solid #bbb; } table tr th { background: #eee; text-align: left; border-top: solid 1px #bbb; } /* top-left border-radius */ table tr:first-child th:first-child { border-top-left-radius: 6px; } /* top-right border-radius */ table tr:first-child th:last-child { border-top-right-radius: 6px; } /* bottom-left border-radius */ table tr:last-child td:first-child { border-bottom-left-radius: 6px; } /* bottom-right border-radius */ table tr:last-child td:last-child { border-bottom-right-radius: 6px; }

<div> <table> <tr> <th>item1</th> <th>item2</th> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> </table> </div>

This is a great solution, but it was a bit hard to read. I rewrote some of the style rules and added an explanation of the code, so hopefully that helps.
apply a radius to the table too, or else it looks weird when you apply a background to the table itself.
This is by far the easier solution I've ever known. Thanks! The other trick by adding border radius separately to the 4 corner cells are too messy comparing to this one.

Cesar · Accepted Answer · 2010-10-18 04:16:58Z

37

Have you tried using table{border-spacing: 0} instead of table{border-collapse: collapse} ???

answered Oct 18, 2010 at 4:16

community wiki

Cesar

4 Comments

RonLugge Over a year ago

Thank you, this let me do what I needed to do (which involved a series of TH elements at the top outside of the 'rounded corner' box containing all the TDs below)

Michael Martin-Smucker Over a year ago

The problem with border-spacing: 0 is that you can't have a 1px border, right? Because the borders stack up instead of collapsing.

Milad.N Over a year ago

border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; yielded exactly what I needed.

Justin Golden Over a year ago

Comment from Milad worked for me EDIT: but this means that my tr border doesn't work because I need border-collapse: collapse for that

fish2000 · Accepted Answer · 2016-02-10 17:37:58Z

30

You'll probably have to put another element around the table and style that with a rounded border.

The working draft specifies that border-radius does not apply to table elements when the value of border-collapse is collapse.

edited Feb 10, 2016 at 17:37

fish2000

4,4352 gold badges41 silver badges80 bronze badges

answered Mar 9, 2009 at 22:56

user59200

4143 silver badges2 bronze badges

4 Comments

vamin Over a year ago

That was something I considered as well, but if I create a div to surround the table and set it to have rounded corners, the square table corners still bleed through. See the newly-posted example.

user59200 Over a year ago

The best compromise I could find was adding a THEAD block to the table and applying the grey background to it (with #eee on the table itself). The header cells overflowed behind the TABLE's border instead in front of it. Then I increased the table border to 3px to hide the overflow.

Brian McCutchon Over a year ago

@vamin "bleed through"- not if you use overflow:hidden;

AmerllicA Over a year ago

So in this situation everyone can use my solution from bottom of these page b2n.ir/table-radius

4 revs, 3 users 73% · Accepted Answer · 2016-02-10 17:01:36Z

As Ian said, the solution is to nest the table inside a div and set it like that:

.table_wrapper { border-radius: 5px; overflow: hidden; }

With overflow:hidden, the square corners won't bleed through the div.

Keep in mind, whoever wants to use it, that with overflow: hidden any popover/tooltip will get clipped by the wrapper dimensions.

4 revs, 3 users 56% · Accepted Answer · 2022-02-28 20:18:25Z

Here is a way:

div { border: 2px solid red; overflow: hidden; border-radius: 14px; transform: rotate(0deg); } table { border-spacing: 0; background-color: blue; height: 100%; width: 100%; }

<div> <table> <tr> <td><br></td> </tr> </table> </div>

Or

 div { ... overflow: hidden; border-radius: 14px; position: relative; z-index: 1; }

This is the only solution that worked for me (in Safari, where headers have background and are position:sticky). Thanks!

Igor Ivancha · Accepted Answer · 2016-02-10 17:16:33Z

To the best of my knowledge, the only way you could do it would be to modify all the cells like so:

table td { border-right-width: 0px; border-bottom-width: 0px; }

And then to get the border on the bottom and right back

table tr td:last-child { border-right-width: 1px; } table tr:last-child td { border-bottom-width: 1px; }

:last-child is not valid in ie6, but if you are using border-radius I assume you don't care.

EDIT:

After looking at your example page, it appears that you may be able to work around this with cell spacing and padding.

The thick gray borders you are seeing are actually the background of the table (you can see this clearly if you change the border color to red). If you set the cellspacing to zero (or equivalently: td, th { margin:0; }) the grey "borders" will disappear.

EDIT 2:

I can't find a way to do this with only one table. If you change your header row to a nested table, you might possibly be able to get the effect you want, but it'll be more work, and not dynamic.

I've added an example with cellspacing=0, and it's much closer. The undesireable borders disappear, but the bottom corners still bleed out.
Thanks again for your help. The tables are generated in php, so I'm thinking if there isn't an elegent solution proposed I'll just assign a class to each corner th/td and style them separately.

AmerllicA · Accepted Answer · 2017-10-24 11:45:08Z

Actually you can add your table inside a div as its wrapper. and then assign these CSS codes to wrapper:

.table-wrapper { border: 1px solid #f00; border-radius: 5px; overflow: hidden; } table { border-collapse: collapse; }

2 revs · Accepted Answer · 2011-08-25 20:43:40Z

I tried a workaround using the pseudo elements :before and :after on the thead th:first-child and thead th:last-child

In combination with wrapping the table with a <div class="radius borderCCC">

table thead th:first-child:before{ content:" "; position:absolute; top:-1px; left:-1px; width:15px; height:15px; border-left:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:5px 0px 0px; } table thead th:last-child:after{ content:" "; position:absolute; top:-1px; right:-1px; width:15px; height:15px; border-right:1px solid #ccc; border-top:1px solid #ccc; -webkit-border-radius:0px 5px 0px 0px; }

see jsFiddle

Works for me in chrome (13.0.782.215) Let me know if this works for you in other browsers.

3 revs, 3 users 53% · Accepted Answer · 2022-02-28 20:27:03Z

I just wrote a crazy set of CSS for this that seems to work perfectly:

 table { border-collapse: separate; border-spacing: 0; width: 100%; } table td, table th { border-right: 1px solid #CCC; border-top: 1px solid #CCC; padding: 3px 5px; vertical-align: top; } table td:first-child, table th:first-child { border-left: 1px solid #CCC; } table tr:last-child td, table tr:last-child th { border-bottom: 1px solid #CCC; } table thead + tbody tr:first-child td { border-top: 0; } table thead td, table th { background: #EDEDED; } /* complicated rounded table corners! */ table thead:first-child tr:last-child td:first-child { border-bottom-left-radius: 0; } table thead:first-child tr:last-child td:last-child { border-bottom-right-radius: 0; } table thead + tbody tr:first-child td:first-child { border-top-left-radius: 0; } table thead + tbody tr:first-child td:last-child { border-top-right-radius: 0; } table tr:first-child td:first-child, table thead tr:first-child td:first-child { border-top-left-radius: 5px; } table tr:first-child td:last-child, table thead tr:first-child td:last-child { border-top-right-radius: 5px; } table tr:last-child td:first-child, table thead:last-child tr:last-child td:first-child { border-bottom-left-radius: 5px; } table tr:last-child td:last-child, table thead:last-child tr:last-child td:last-child { border-bottom-right-radius: 5px; }

<table> <thead> <tr> <th> Table Head </th> </tr> </thead> <tbody> <tr> <td> Table Data </td> </tr> </tbody> </table>

/* end complicated rounded table corners !*/

2 revs, 2 users 89% · Accepted Answer · 2013-04-18 12:10:53Z

The given answers only work when there are no borders around the table, which is very limiting!

I have a macro in SASS to do this, which fully supports external and internal borders, achieving the same styling as border-collapse: collapse without actually specifying it.

Tested in FF/IE8/Safari/Chrome.

Gives nice rounded borders in pure CSS in all browsers but IE8 (degrades gracefully) since IE8 doesn't support border-radius :(

Some older browsers may require vendor prefixes to work with border-radius, so feel free to add those prefixes to your code as necessary.

This answer is not the shortest - but it works.

.roundedTable { border-radius: 20px / 20px; border: 1px solid #333333; border-spacing: 0px; } .roundedTable th { padding: 4px; background: #ffcc11; border-left: 1px solid #333333; } .roundedTable th:first-child { border-left: none; border-top-left-radius: 20px; } .roundedTable th:last-child { border-top-right-radius: 20px; } .roundedTable tr td { border: 1px solid #333333; border-right: none; border-bottom: none; padding: 4px; } .roundedTable tr td:first-child { border-left: none; }

To apply this style simply change your

<table>

tag to the following:

<table class="roundedTable">

and be sure to include the above CSS styles in your HTML.

Hope this helps.

You don't need prefixes for border-radius anymore, expect for FF 3.6 (-moz). Also, -khtml is certainly no longer needed.
@JonatanLittke, you can always edit the answer if you think it can be improved. I removed all the prefixes and added a link to caniuse.com so people can make their own decisions about prefixes for border-radius.

brauliobo · Accepted Answer · 2013-06-08 15:26:01Z

For a bordered and scrollable table, use this (replace variables, $ starting texts)

If you use thead, tfoot or th, just replace tr:first-child and tr-last-child and td with them.

#table-wrap { border: $border solid $color-border; border-radius: $border-radius; } table { border-collapse: collapse; border-spacing: 0; } table td { border: $border solid $color-border; } table td:first-child { border-left: none; } table td:last-child { border-right: none; } table tr:first-child td { border-top: none; } table tr:last-child td { border-bottom: none; } table tr:first-child td:first-child { border-top-left-radius: $border-radius; } table tr:first-child td:last-child { border-top-right-radius: $border-radius; } table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; } table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap> <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </div>

Akexis · Accepted Answer · 2016-09-27 17:23:10Z

Found this answer after running into the same problem, but found it's pretty simple: just give the table overflow:hidden

No need for a wrapping element. Granted, I don't know if this would have worked 7 years ago when the question was initially asked, but it works now.

This is a clever solution but it also "removes" the actual border as well. On Chrome the right border and bottom border of the table disappear and all rounded corners have no border.

Jared Rice · Accepted Answer · 2022-07-22 19:57:30Z

I see a lot of weird hacks and workarounds so I would like to suggest my solution for creating a table with border-radius and the same visual effect as border: collapse; by simply targeting nested rows and cells to turn borders off.

You can get more in-depth to suit your needs using other pseudo selectors like first-child, etc, but this is the minimal solution:

table { width: 100%; border-spacing: 0; border-radius: 4px; border: 1px solid #ccc; } th, td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; }

<table> <thead> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </tbody> </table>

Dreamoon · Accepted Answer · 2023-09-15 03:26:15Z

Just use outline replace border:

table { border-collapse: collapse; border-radius: 16px; overflow: hidden; border: 1px solid black; outline: 1px solid black; } table th, table td { border: 1px solid black; padding: 12px; }

<table> <tr> <th>Num</th> <th>Lett</th> <th>Lat</th> </tr> <tr> <td>1</td> <td>A</td> <td>I</td> </tr> <tr> <td>2</td> <td>B</td> <td>II</td> </tr> <tr> <td>3</td> <td>C</td> <td>III</td> </tr> </table>

3 revs, 3 users 67% · Accepted Answer · 2016-02-10 16:57:54Z

I had the same problem. remove border-collapse entirely and use: cellspacing="0" cellpadding="0" in the html document. example:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

This works, but it requires you to afterwards use firstchild/lastchild tricks to get the effect.

3 revs, 2 users 92% · Accepted Answer · 2012-10-19 22:01:28Z

I started experiment with "display" and I found that: border-radius, border, margin, padding, in a table are displayed with:

display: inline-table;

For example

table tbody tr { display: inline-table; width: 960px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

But we need set a width of every column

tr td.first-column { width: 100px; } tr td.second-column { width: 860px; }

Tommer · Accepted Answer · 2012-11-28 18:32:53Z

Solution with border-collapse:separate for table and display:inline-table for tbody and thead.

table { width: 100%; border-collapse: separate; border-spacing: 0px; background: transparent; } table thead { display: inline-table; width: 100%; background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0; -webkit-border-top-left-radius: 7px; -moz-border-radius-topleft: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topright: 7px; border-radius: 7px 7px 0px 0px; padding: 1px; padding-bottom: 0; } table tbody { border: 1px solid #ddd; display: inline-table; width: 100%; border-top: none; }

there is no reason to make this answer community wiki. Doing this makes it so that you will get no reputation from your answer.

Ahmed Mostafa · Accepted Answer · 2015-02-08 21:59:09Z

I am new with HTML and CSS and I was also looking for solution for this, here what I find.

table,th,td { border: 1px solid black; border-spacing: 0 } /* add border-radius to table only*/ table { border-radius: 25px } /* then add border-radius to top left border of left heading cell */ th:first-child { border-radius: 25px 0 0 0 } /* then add border-radius to top right border of right heading cell */ th:last-child { border-radius: 0 25px 0 0 } /* then add border-radius to bottom left border of left cell of last row */ tr:last-child td:first-child { border-radius: 0 0 0 25px } /* then add border-radius to bottom right border of right cell of last row */ tr:last-child td:last-child { border-radius: 0 0 25px 0 }

I try it, guess what it works :)

3 revs, 2 users 68% · Accepted Answer · 2022-12-16 14:30:31Z

Here is a solution using SCSS. It creates a table with rounded corners and bordered cells.

This solution uses the approach from @Ramon Tayag. The key is to use border-spacing: 0, as he points out.

$line: 1px solid #979797; $radius: 5px; table { border: $line; border-radius: $radius; border-spacing: 0; th, tr:not(:last-child) td { border-bottom: $line; } th:not(:last-child), td:not(:last-child) { border-right: $line; } }

2 revs, 2 users 73% · Accepted Answer · 2016-02-10 17:00:28Z

Here is a recent example of how to implement a table with rounded-corners from http://medialoot.com/preview/css-ui-kit/demo.html. It's based on the special selectors suggested by Joel Potter above. As you can see, it also includes some magic to make IE a little happy. It includes some extra styles to alternate the color of the rows:

table-wrapper { width: 460px; background: #E0E0E0; filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7'); background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7)); background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7); padding: 8px; -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff; -webkit-border-radius: 10px; /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/ -o-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; margin-bottom: 20px; } .table-wrapper table { width: 460px; } .table-header { height: 35px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; text-align: center; line-height: 34px; text-decoration: none; font-weight: bold; } .table-row td { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; text-align: left; text-decoration: none; font-weight: normal; color: #858585; padding: 10px; border-left: 1px solid #ccc; -khtml-box-shadow: 0px 1px 0px #B2B3B5; -webkit-box-shadow: 0px 1px 0px #B2B3B5; -moz-box-shadow: 0px 1px 0px #ddd; -o-box-shadow: 0px 1px 0px #B2B3B5; box-shadow: 0px 1px 0px #B2B3B5; } tr th { border-left: 1px solid #ccc; } tr th:first-child { -khtml-border-top-left-radius: 8px; -webkit-border-top-left-radius: 8px; -o-border-top-left-radius: 8px; /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/ border-top-left-radius: 8px; border: none; } tr td:first-child { border: none; } tr th:last-child { -khtml-border-top-right-radius: 8px; -webkit-border-top-right-radius: 8px; -o-border-top-right-radius: 8px; /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/ border-top-right-radius: 8px; } tr { background: #fff; } tr:nth-child(odd) { background: #F3F3F3; } tr:nth-child(even) { background: #fff; } tr:last-child td:first-child { -khtml-border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -o-border-bottom-left-radius: 8px; /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/ border-bottom-left-radius: 8px; } tr:last-child td:last-child { -khtml-border-bottom-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -o-border-bottom-right-radius: 8px; /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/ border-bottom-right-radius: 8px; }

2 revs, 2 users 61% · Accepted Answer · 2024-07-09 15:48:25Z

Working example of a table with rounded corners and borders on all cells:

Open example in Codepen

table { /* Set border props on the table */ border: 1px solid #ccc; border-collapse: separate; border-spacing: 0px; border-radius: 5px; } table th, table td { /* Every th and td should use border-bottom and border-right */ border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding:10px; /* Just to visualize better */ } table th:last-child, table td:last-child { /* Remove the border-right on the last cell, since the outer table already have a border */ border-right: 0px; } table tr:last-child td { /* Remove the bottom border on the last row, since the outer table already have a border */ border-bottom: 0px; }

<table> <thead> <tr> <th>First header</th> <th>Second header</th> </tr> </thead> <tbody> <tr> <td>First cell</td> <td>Second cell</td> </tr> <tr> <td>Third cell</td> <td>Last cell</td> </tr> </tbody> </table>

Mustapha GHLISSI · Accepted Answer · 2024-12-26 17:06:49Z

After many tries, the best solution found is to draw a border using box-shadow instead of using border property, apply the border-radius and hide the visible children borders using overflow: hidden:

table { border-radius: var(--border-radius); // Set up border radius overflow: hidden; // Prevent children borders from appearing above the table drawn border box-shadow: 0 0 0 1px #666; // Draw the border using shadow. }

That's all !

3 revs, 2 users 68% · Accepted Answer · 2025-01-29 12:47:38Z

Another possible way is to wrap table in a div, and then apply border-radius to this wrapper. You will also need to remove the borders from the outer table cells.

.table-wrapper { display: inline-flex; border: 1px solid black; border-radius: 16px; overflow: hidden; } table { border-collapse: collapse; } table th, table td { padding: 8px 16px; border: 1px solid black; } table tr:first-child td, table tr:first-child th { border-top: none; } table tr:last-child td { border-bottom: none; } tr td:first-child, tr th:first-child { border-left: none; } table tr td:last-child, table tr th:last-child { border-right: none; }

<div class="table-wrapper"> <table> <thead> <tr> <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> </div>

2 revs · Accepted Answer · 2021-08-30 13:38:04Z

Some of the other answers are good, but none of them consider you using thead, tbody and tfoot. Or cases, when you can either combination of those. And when you apply them, you can get some unnecessary rounding or borders. Thus I tried adjusting css-only answer from @NullUserException and this is what I got:

table { border-radius: 5px; border-width: 2px; border-style: solid; border-color: darkgreen; border-spacing: 0; border-collapse: separate; width: 100%; } table tr td, table tr th { border-right-width: 2px; border-right-style: solid; border-right-color: darkgreen; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: darkgreen; } table tr th:last-child, table tr td:last-child { border-right-width: 2px; border-right-style: none; border-right-color: darkgreen; } table tr:last-child td, table tr:last-child th { border-bottom-width: 2px; border-bottom-style: none; border-bottom-color: darkgreen; } /* top-left border-radius */ table :not(tfoot) tr:first-child th:first-child, table :not(tfoot) tr:first-child td:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 0; } /* top-right border-radius */ table :not(tfoot) tr:first-child th:last-child, table :not(tfoot) tr:first-child td:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 0; } /* bottom-left border-radius */ table :not(thead) tr:last-child th:first-child, table :not(thead) tr:last-child td:first-child { border-bottom-left-radius: 5px; } /* bottom-right border-radius */ table :not(thead) tr:last-child th:last-child, table :not(thead) tr:last-child td:last-child{ border-bottom-right-radius: 5px; } /*Handle thead and tfoot borders*/ table thead tr:first-child th, table thead tr:first-child td { border-top-style: none; } table thead tr:last-child th, table thead tr:last-child td { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: darkgreen; } table tfoot tr:last-child th, table tfoot tr:last-child td { border-bottom-style: none; } table tfoot tr:first-child th, table tfoot tr:first-child td { border-top-style: solid; border-top-width: 2px; border-top-color: darkgreen; } table tr:first-child th, table tr:first-child td { border-top-style: none; }

darkgreen is used to clearly show that borders are correct everywhere across the whole table. Essentially, wherever you see darkgreen - is where you style the table's borders.
This codepen shows regular table and the one with thead, tbody and tfoot. CSS is identical to the one above with only the addition of style reset for th. At the moment of writing, you can see, that they both render identically.

noe · Accepted Answer · 2020-07-30 06:20:10Z

-1

easiest way...

table { border-collapse: inherit; border: 1px solid black; border-radius: 5px; }

answered Jul 30, 2020 at 6:20

community wiki

noe

2 Comments

Dima Kozhevin Over a year ago

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

Henrik Albrechtsson Over a year ago

Why would you need to inherit something like border-collapse? 🤷🏼‍♂️

Andreas M. · Accepted Answer · 2019-10-15 01:40:45Z

The best solution so far comes from your own solution and it goes like this:

table, tr, td, th{ border: 1px solid; text-align: center; } table{	border-spacing: 0; width: 100%; display: table; } table tr:last-child td:first-child, tr:last-child, table { border-bottom-left-radius: 25px; } table tr:last-child td:last-child, tr:last-child, table { border-bottom-right-radius: 25px; } table tr:first-child th:first-child, tr:first-child, table { border-top-left-radius: 25px; } table tr:first-child th:last-child, tr:first-child, table { border-top-right-radius: 25px; }

<table> <tr> <th>Num</th><th>Lett</th><th>Lat</th> </tr> <tr> <td>1</td><td>A</td><td>I</td> </tr> <tr> <td>2</td><td>B</td><td>II</td> </tr> <tr> <td>3</td><td>C</td><td>III</td> </tr> </table>

jt3k · Accepted Answer · 2021-06-06 12:47:38Z

table { width: 200px; text-align: center; border-radius: 12px; overflow: hidden; } table td { border-width: 1px 0 0 1px; } table tr:first-child td { border-top: none; } table tr td:first-child { border-left: none; } div { background-color: lime; }

<table cellspacing="0" cellpadding="0" border="1"> <tr> <td><div>1</div></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </table>

thanks for your reply. I didn't pay attention to this section before. this is good to know for me developer.mozilla.org/en-US/docs/Web/HTML/Element/…

Kasun Pathirana · Accepted Answer · 2022-02-12 05:16:00Z

Use "overflow: hidden" with "border-radius" This works with "collapse" table as well

Example:

border-radius: 1em; overflow: hidden;

Collectives™ on Stack Overflow

The border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

31 Answers 31

9 Comments

7 Comments

4 Comments

4 Comments

4 Comments

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

2 Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

31 Answers 31

9 Comments

7 Comments

4 Comments

4 Comments

4 Comments

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

2 Comments

2 Comments

3 Comments

Comments

Linked

Related