How to remove space above the first html table row when using border-collapse: separate?

I am using border-collapse: separate property to add spacing between table rows, and I would like to remove the spacing above the very first table row. What's the best way to do that?

This is what my table looks like right now.

Below is my code

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: separate;
            border-spacing: 0px 7px; 
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

I tried using border-collapse: collapse property and setting border-bottom, which removed the spacing above the first row successfully, however, the rounded corners did not work. Bellow is the code example.

<!DOCTYPE html>
<html>
<head>
    <title>Table</title>
    <style>
        .table-container {
            width: 400px;
            background-color: grey;
            padding: 0px 10px 10px 10px;
        }

        table { 
            border-collapse: collapse;
            width: 100%;
        } 
                
        tr { 
            background-color: #dc2626; 
            color: white; 
            border-bottom: 7px solid grey;
        } 

        td {
            padding: 5px;
        }

        tbody tr td:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        tbody tr td:last-child {
            border-top-right-radius: 6px; 
            border-bottom-right-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <tbody>   
                <tr><td>value 1</td><td>value2</td></tr> 
                <tr><td>value3</td><td>value4</td></tr> 
            </table></tbody>
        </table>
    </div>
    <script>
    </script>
</body>
</html>

Is there a way to achieve both - remove the spacing above the first row and have rounded corners on all table rows?

Solution

It seems we can only add a negative margin to compensate for border spacing.

BTW, the table closing tag </table> is mismatched in your code.

.table-container {
    /* negative margin to compensate for border-spacing  */
    margin-top: calc(var(--border-space-vertical) * -1);
    width: 400px;
    background-color: grey;
    padding: 0px 10px 10px 10px;
  }

<!DOCTYPE html>
<html>
  <head>
    <title>Table</title>
    <style>
      body {
        margin: 0;
      }
      :root {
        --border-space-vertical: 10px;
      }
      .table-container {
        /* negative margin to compensate for border-spacing  */
        margin-top: calc(var(--border-space-vertical) * -1);
        width: 400px;
        background-color: grey;
        padding: 0px 10px 10px 10px;
      }
      table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 10px var(--border-space-vertical); /* Adjust spacing values as needed */
      }
      tr {
        background-color: #dc2626;
        color: white;
      }
      td {
        padding: 5px;
      }
      tbody tr td:first-child {
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
      }
      tbody tr td:last-child {
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
      }

      tr:first-child {
        border-top: none;
      }
    </style>
  </head>
  <body>
    <div class="table-container">
      <table>
        <tbody>
          <tr>
            <td>value 1</td>
            <td>value2</td>
          </tr>
          <tr>
            <td>value3</td>
            <td>value4</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script></script>
  </body>
</html>