Rounded table with background color on table rows

I have a rounded html table that looks like this:

Now I want to add background color to every other row, so I add the following CSS, but the result doesn't look right. The background color appears as a square shape, and I can't figure out how to get the border-radius to apply to the color:

.table tr:nth-child(even) {
  background-color: var(--main-orange-row-color);
}

.table tr:nth-child(odd) {
  background-color: white !important;
}

.table > thead > tr {
  background-color: white !important;
}

Any help would be greatly appreciated, see below for my code!

.table {
  margin-top: 1rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  position: relative;
  border-radius: 1rem;
  width: fit-content;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
}

.table-th,
.table td {
  padding: 12px;
  height: 40px;
}

.table tr:nth-child(even) {
  background-color: orange;
}

.table tr:nth-child(odd) {
  background-color: white !important;
}

.table>thead>tr {
  background-color: white !important;
}

<!-- Accounts Table -->
<div id="accounts-table-container">
  <table id="accounts-table" class="table">
    <thead class="sticky table-header">
      <tr id="results-tr">
        <!-- social media -->
        <th class="sticky left-align table-th">Social Media</th>

        <!--posts count -->
        <th class="sticky left-align table-th">Account Handle</th>
      </tr>
    </thead>
    <tbody id="accounts-table-body">
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /Accounts Table -->

Solution

Now it wants to "clip" outside the table. you can tell the table to not have its content float outside of it by adding either overflow:hidden or overflow:clip to the .table

Have a great day!

.table {
  margin-top: 1rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  position: relative;
  border-radius: 1rem;
  width: fit-content;
  overflow:clip;
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
}

.table-th,
.table td {
  padding: 12px;
  height: 40px;
}

.table tr:nth-child(even) {
  background-color: orange;
}

.table tr:nth-child(odd) {
  background-color: white !important;
}

.table>thead>tr {
  background-color: white !important;
}

<!-- Accounts Table -->
<div id="accounts-table-container">
  <table id="accounts-table" class="table">
    <thead class="sticky table-header">
      <tr id="results-tr">
        <!-- social media -->
        <th class="sticky left-align table-th">Social Media</th>

        <!--posts count -->
        <th class="sticky left-align table-th">Account Handle</th>
      </tr>
    </thead>
    <tbody id="accounts-table-body">
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
      <tr>
        <td class="left-align">Twitter</td>
        <td class="left-align">Handle</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /Accounts Table -->