Border radius and border together in a table td

Question

I want to give my first and last <td> a border-radius so that my table looks like a rounded table.

First I applied background to my <td> and then added border-radius, which works fine I think(background rounded from the corner).

After that when I applied border to my <td>, I saw a weird thing(See below snippet).

So my question is why border is not rounded as background?

Stack Snippet

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

Answer 1

try border-collapse: inherit; and make 'border-spacing: 0px;'

table {
  width: 100%;
  border-collapse: inherit;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
  border-radius: 30px;
  border-spacing: 0px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
  border-left: none;
}
table td:first-child{
  border-left: 1px solid #000000;
}
table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

Answer 2

Please checkout this solution with first row and last row rounded.

HTML

<table>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: separate;
  border-radius: 20px;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table tr {
  border-radius: 20px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}

I hope it will help you.

Fiddle: https://jsfiddle.net/xwqjgb5k/