How to round table corners

Question

How to round html table corners using css?

Table looks like this:

<table>
    <tr>
       <th colspan="2">header</th>
    </tr>
     <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

Css:

th {
    background-color: black;
    color: white;
    border: none;
}

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

table tr:first-child th:first-child {
    border-top-left-radius: 5px
}

table tr:first-child th:last-child {
    border-top-right-radius: 5px
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 5px
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 5px
}

Only top right and left corners are rounded, but there is black border on them that isn't rounded. And bottom corners aren't rounded. I want all this corners to be round.

score 1 · Answer 1 · answered Oct 25 '19 at 11:20

Easy . use border-radius on table.

table{
  border:1px solid black;
  border-radius:10px;
 }

<!DOCTYPE html>
<html>
<body>

<h2>Filterable Table</h2>
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>a_r@test.com</td>
  </tr>
  </tbody>
</table>
  

</body>
</html>

score 0 · Answer 2 · answered Oct 25 '19 at 11:22

Try this, it's should also make it a bit nicer to look at. u can always change the colors yourself.

body {
  margin: 30px;
}
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;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 5px;
}

/* top-right border-radius */
table tr:first-child th:last-child {
  border-top-right-radius: 5px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

score 0 · Answer 3 · answered Oct 25 '19 at 11:23

Solution for the table that you have mentioned

<style>
body {
  margin: 30px;
}
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;
  border-top: 1px solid #bbb;
  text-align: left;
}

/* 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;
}
</style>
<table>
    <tr>
        <th colspan="2">header</th>
    </tr>
     <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

How to round table corners

3 Answers3