Rectangular heighlight ring around the row

Question

I want to add a rectangular ring around the row in an HTML table like shown in this image

How can I do that?

I am creating a table using streamlit where I want to show a rectangular border around the row. The purpose of the rectangular border will be to highlight active and inactive user. So, if the user is active, the colour of the rectangle will be green else red.

Below is the example of table, where the border is "green" and transparent background so I don't need border to be square. I need rectangle over the row with 50% radius as shown in the image:

td {
  padding: 5px;
  text-align: center;
  border: 1px solid green;
  /* Light border for all cells */
}

/* Apply rounded corners to the first and last cells in each row */
tr td:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

tr td:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

<table>
  <tr class="highlighted">
    <td>Pellentesque</td>
    <td>$120,146</td>
    <td>0.007</td>
    <td>5.24</td>
    <td>$99,225</td>
    <td>24.59%</td>
  </tr>
  <tr>
    <td>Nunc vestibulum</td>
    <td>$85,493</td>
    <td>0.006</td>
    <td>3.57</td>
    <td>$120,146</td>
    <td>35.07%</td>
  </tr>
  <tr class="highlighted">
    <td>Mauris risus</td>
    <td>$99,225</td>
    <td>0.009</td>
    <td>5.31</td>
    <td>$85,493</td>
    <td>40.34%</td>
  </tr>
</table>

Answer 1

Use a pseudo-element like below:

td {
  padding: 5px;
  text-align: center;
}

tr.highlighted {
  position: relative; /* relative to the whole row */
}
/* only the pseudo element of the first-child */
tr.highlighted td:first-child:before {
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 2lh; /* or any big value */
  border: 2px solid green;
}

<table>
  <tr class="highlighted">
    <td>Pellentesque</td>
    <td>$120,146</td>
    <td>0.007</td>
    <td>5.24</td>
    <td>$99,225</td>
    <td>24.59%</td>
  </tr>
  <tr>
    <td>Nunc vestibulum</td>
    <td>$85,493</td>
    <td>0.006</td>
    <td>3.57</td>
    <td>$120,146</td>
    <td>35.07%</td>
  </tr>
  <tr class="highlighted">
    <td>Mauris risus</td>
    <td>$99,225</td>
    <td>0.009</td>
    <td>5.31</td>
    <td>$85,493</td>
    <td>40.34%</td>
  </tr>
</table>