How to get rounded corners on a css tablerow while also having a backgroundimage

I'm trying to create an image that looks like a horizontal bar chart, with the percentages visible as a colour on a neutral background and the description on top of it (similar to this though obviously not moving/responsive). Due to the limitations of the site I'm going to upload this to it needs to be created with both a html table and basic css.

I would like the corners of the individual rows to be rounded and have already found that this only works by changing the border-radius of the cells, not the rows. However, the background image is still a rectangle.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

table {
  border-collapse: separate;
  border-spacing: 0 0.75vw;
  width: 35vw;
  margin: 1vw auto auto auto;
}

td {
  border: solid 2px white;
  padding: 0.5vw;
}

td:first-child {
  border-top-left-radius: 0.5vw;
  border-bottom-left-radius: 0.5vw;
}

td:last-child {
  border-bottom-right-radius: 0.5vw;
  border-top-right-radius: 0.5vw;
}

.chartrow {
  background-image: linear-gradient(red, red);
  background-color: orange;
  background-position: left;
  background-repeat: no-repeat;
}

.row1 {
  background-size: 6.5%;
}

.row2 {
  background-size: 20.3%;
}

.container {
  background-color: green;
  width: 50vw;
  margin: auto;
}

<!-- language: lang-html -->

<div class="container">
  <table>
    <tbody>
      <tr class="chartrow row1">
        <td>Answer 1</td>
        <td>6.5%</td>
      </tr>
      <tr class="chartrow row2">
        <td>Answer 2</td>
        <td>20.3%</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- end snippet -->

(The white border is only to show what I want to achieve)<br/><br/>
Is there a way to get the corners of the background image rounded, or maybe another way altogether to display the bar chart in the background?

By default you can’t style <tr>s that way because they have display: table-row. But you can set them to display: block (or flex or whatever you need) and can style them the way you’d expect.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

table {
  border-collapse: separate;
  border-spacing: 0 0.75vw;
  width: 35vw;
  margin: 1vw auto auto auto;
}

td {
  border: solid 2px white;
  padding: 0.5vw;
}

td:first-child {
    flex-grow: 1;
}

td:last-child {
    width: 6ch; /* fixed so it’s the same in all rows. wouldn’t need to do it like this once subgrid lands. */
}

.chartrow {
  background-image: linear-gradient(red, red);
  background-color: orange;
  background-position: left;
  background-repeat: no-repeat;
  display: flex;
  border-radius: .5vw;
  overflow: hidden; /* so the background doesn’t overflow the rounded border */
  margin-block: .5rem;
}

.row1 {
  background-size: 6.5%;
}

.row2 {
  background-size: 20.3%;
}

.container {
  background-color: green;
  width: 50vw;
  margin: auto;
}

<!-- language: lang-html -->

<div class="container">
  <table>
    <tbody>
      <tr class="chartrow row1">
        <td>Answer 1</td>
        <td>6.5%</td>
      </tr>
      <tr class="chartrow row2">
        <td>Answer 2</td>
        <td>20.3%</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- end snippet -->