CSS Rounded borders on tables

Question

I am trying to get rounded corners on tables with various child elements as in this bin: http://jsbin.com/seqisa/1/

I can get the shaded background to have rounded corners, but nothing I do seems to affect the border line. I have read several other questions that seem to ask the smae thing, but none of the answers provided seem to work for me.

This is what I'm getting at the moment. The caption element behaves fine, but none of the thead, tbody or tfoot work. I have tried setting the border on every element individually , but none of them result in rounded corners.

Current output

Here is the html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tbody>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </tbody>
  </table>

  <table>
    <caption>Caption</caption>
    <tbody>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </tbody>
  </table>

  <table>
    <caption>Caption</caption>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Footer 1</th>
        <td>Footer 2</td>
      </tr>
    </tfoot>

  </table>

</body>
</html>

And the CSS:

/* Basic styling */
table {
  margin-bottom: 15px;
  border-collapse: collapse;
}
caption { background-color: green; }
thead { background-color: blue; }
tbody { background-color: lightgray; }
tfoot { background-color: magenta; }
th, td, caption { padding: 4px; }

/* Radius */
table > :first-child,
table > :first-child > tr:first-child > td:first-child,
table > :first-child > tr:first-child > th:first-child {
  border-top-left-radius: 10px;
}

table > :first-child,
table > :first-child > tr:first-child > td:last-child,
table > :first-child > tr:first-child > th:last-child {
  border-top-right-radius: 10px;
}

table > :last-child,
table > :last-child > tr:last-child > td:first-child,
table > :last-child > tr:last-child > th:first-child {
  border-bottom-left-radius: 10px;
}

table > :last-child,
table > :last-child > tr:last-child > td:last-child,
table > :last-child > tr:last-child > th:last-child {
  border-bottom-right-radius: 10px;
}

/* Borders */

table > * {
  border: 2px solid darkred;
}

try to add the border and border-radius to thead and tfoot or tbody if tfoot not exists only — UnskilledFreak
– UnskilledFreak, Commented Nov 12, 2014 at 13:15

pbaldauf · Accepted Answer · 2014-11-12 13:16:03Z

2

Try to use this CSS

* { border-collapse: separate; }

border-radius won't work with border-collapse: collapse; due to W3C.org specifications.

answered Nov 12, 2014 at 13:16

pbaldauf

1,6812 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

aquavitae Over a year ago

But border-collapse: separate puts big gaps between each cell, so how would I prevent that then?

UnskilledFreak Over a year ago

u can use border-spacing:0px to prevent the gaps

Daneel Over a year ago

Thank you @UnskilledFreak for this comment. I've been searching for ages for this trick.

Osman Sokuoğlu · Accepted Answer · 2014-11-12 13:40:49Z

0

Try add below like CSS for your own purpose

   table {
     border-image: none;
     border:5px solid red;
     border-top:0 none;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
   }

the result i took, though i'm not sure if you really asked for below result..

enter image description here

edited Nov 12, 2014 at 13:40

answered Nov 12, 2014 at 13:26

Osman Sokuoğlu

263 bronze badges

Collectives™ on Stack Overflow

CSS Rounded borders on tables

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related