Border Radius of Table is not working

Question

I want to add a border radius around the entire table. But the following code is not working in both the latest versions of Firefox and Google Chrome.

HTML

Answer 1

This is my solution using the wrapper, just removing border-collapse might not be helpful always, because you might want to have borders.

.wrapper {
  overflow: auto;
  border-radius: 6px;
  border: 1px solid red;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  border-style: hidden;

  width:100%;
  max-width: 100%;
}

th, td {
  padding: 10px;
  border: 1px solid #CCCCCC;
}

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Foo Bar boo</td>
        <td>Lipsum</td>
        <td>Beehuum Doh</td>
      </tr>
      <tr>
        <td>Dolor sit</td>
        <td>ahmad</td>
        <td>Polymorphism</td>
      </tr>
      <tr>
        <td>Kerbalium</td>
        <td>Caton, gookame kyak</td>
        <td>Corona Premium Beer</td>
      </tr>
    </tbody>
  </table>  
</div>

This article helped: https://css-tricks.com/table-borders-inside/