title: HTML and CSS: rounded corners on tables
body: <p>I have a bit of a problem. I would like all corners of my table to be rounded, however the dark rows seem to still have a pointy border. Thanks for your help!</p>
  
  <p><a href="https://i.stack.imgur.com/b6om6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b6om6.png" alt="The Problem:"></a></p>
  
  <pre><code>.table_background {
      display: flex;
      background-color: white;
      margin-left: 3vw;
      margin-right: 3vw;
      margin-bottom: 10vh;
      margin-top: 5vh;
      box-shadow: 0px 0px 10px rgba(114, 114, 113, 0.5);
      border-radius: 15px;
  }
  
  table {
      font-family: futura-pt, sans-serif;
      font-weight: 400;
      font-style: normal;
      border-collapse: collapse;
      width: 100%;
      border-radius: 15px;
  }
  
  th {
      font-size: 18px;
      text-align: left;
      padding: 20px 20px 20px 20px;
  }
  
  table,
  td {
      padding: 8px 8px 8px 20px;
  }
  
  tr:nth-child(even) {
      background-color: #eff2f5;
  }
  
  tr:not(:first-child):hover {
      background-color: rgba(114, 114, 113, 0.2);
  }
  </code></pre>