How do you stop a thead background color from leaking when there are rounded corners?

Question

I have a table with rounded corners. I've specified a different background colour only for the thead.

On all browsers other than Firefox, the background colour leaks through the rounded corner. I've set overflow to hidden but that doesn't seem to help.

How can I stop the background colour from leaking through the rounded corner of the table?

Here's the code: https://codepen.io/ayushn21/pen/OJVRMgG

Thanks!

Answer 1

You have to set the border-radius (top-left and top-right) for the appropriate th cells (first and last child accordingly). So simply add the following to the CSS of your Codepen Example.

  th:first-child {
    border-top-left-radius: 10px;
  }
  th:last-child {
    border-top-right-radius: 10px;
  }

Try it out in the snippet below.

table {
	 border: 1px solid #bcccdc;
	 border-collapse: separate;
	 border-radius: 10px;
	 overflow: hidden;
}
 table td, table th {
	 padding: 10px;
	 vertical-align: middle;
	 border-left: 1px solid #bcccdc;
	 border-top: 1px solid #bcccdc;
}
 table th:first-child {
	 border-top-left-radius: 10px;
}
 table th:last-child {
	 border-top-right-radius: 10px;
}
 table th {
	 font-family: sans-serif;
	 background-color: #f1f5f8;
	 border-top: none;
}
 table td:first-child, table th:first-child {
	 border-left: none;
}
 table tr.section-header {
	 background-color: #eefcf5;
	 font-size: 80%;
	 font-weight: 500;
}
 table caption {
	 font-family: sans-serif;
	 font-style: italic;
	 margin-bottom: 5px;
	 font-weight: 500;
	 text-align: center;
}

<table>
  <caption>A caption</caption>
  <thead>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>    
  </tbody>
</table>