I figured it out. You just have to use some special selectors.

The problem with rounding the corners of the table was that the td elements didn't also become rounded. You can solve that by doing something like this:

table tr:last-child td:first-child {
    border: 2px solid orange;
    border-bottom-left-radius: 10px;
}
    
table tr:last-child td:last-child {
    border: 2px solid green;
    border-bottom-right-radius: 10px;
}

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Now everything rounds properly, except that there's still the issue of border-collapse: collapse breaking everything.

A workaround is to add border-spacing: 0 and leave the default border-collapse: separate on the table.

There is no issue here at all. You're free to apply the class wherever you'd like, no issues really. Elements smaller than (height or width is less than) 2000px will become circles, elements larger than (height or width is more than) 2000px will not become circles, but rather stay their original shapes but have largely rounded corners.

This was brought up in W3 here:

"If any horizontal radius is larger than half the width of the box, it is reduced to that value. If any vertical radius is larger than half the height of the box, it is reduced to that value. (There are four horizontal and four vertical radii.) This is an easy algorithm, because it looks at each radius independently of all others, but it disallows possibly useful borders that combine large and small radii and it may turn quarter circles into quarter ellipses." - The documentation of the border-radius property

I should mention that you can use percents as a value, 50% being the max that will create a circle given the element is a square originally. If the element is not a square then it will create an ellipse.

Also note that all values above 50% will be equivalent to 50% when applied to all corners (like the shorthand border-radius: 50% which applies it to each corner). As jbutler483 pointed out in the comments, if it is applied to individual corners, 50% is not the same as 100% because of how they combine with each other. Instead all values above 100% are equivalent to 100%.

It's also important to note that something like border: 50% and border: really-high-pixel-value can have different effects if the element is not square.

Also of note, you can use the CSS constant of infinity if you want to set a really high pixel value (you have to use calc(infinity * 1px)).