CODEWITHSUNDEEP
htmlcsshtml-table
aquavitae
aquavitae

Reputation: 19154

CSS Rounded borders on tables

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

Upvotes: 0

Views: 624

Answers (2)

Osman Sokuoğlu
Osman Sokuoğlu

Reputation: 26

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

Upvotes: 0

pbaldauf
pbaldauf

Reputation: 1681

Try to use this CSS

* { border-collapse: separate; }

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

Upvotes: 2

Related Questions