Tailwind border and border-radius (rounded) issue on html table headers

Question

I'm trying to round the corners of this table with a border. I have found that the elements themselves will round (you can see this in the bg colors in the screenshots), but the border does not round with the element the way I expected.

I've tried applying the border and rounding to every layer (see below), and I get this. I imagine this is some CSS nuance when it comes to tables, but I just can't figure out why this would only affect borders and not the inner elements themselves.

     <table
        {...getTableProps()}
        className="text-left bg-purple-500 rounded-full border-2 border-accent"
      >
        <thead className="text-left bg-purple-500 rounded-full border-2 border-accent">
          {headerGroups.map((headerGroup) => (
            <tr
              {...headerGroup.getHeaderGroupProps()}
              className="text-left bg-purple-500 rounded-full border-2 border-accent"
            >
              {headerGroup.headers.map((column) => (
                // Add the sorting props to control sorting. For this example
                // we can add them into the header props
                <th
                  {...column.getHeaderProps(column.getSortByToggleProps())}
                  className="p-4 bg-green-700 rounded-full "
                >
                  {column.render("Header")}
                  {/* Add a sort direction indicator */}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? " 🔽"
                        : " 🔼"
                      : ""}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
    ```

Answer 1

Following on from @tromgy's answer, I've put together a very simple table to show how this can be achieved using border-separate on the table element:

  <table className="rounded-sm text-left border border-separate border-tools-table-outline border-black border-1 w-full">
    <thead className="" >
      <th className="rounded-tl-sm bg-yellow-200 pl-12">One</th>
      <th className="rounded-tr-sm bg-yellow-200 pl-12">Two</th>
    </thead>
    <tbody className="rounded-b-sm">
      <tr>
        <td className="bg-blue-100 pl-12">1</td>
        <td className="bg-blue-100 pl-12">2</td>
      </tr>

      <tr>
        <td className="rounded-bl-sm bg-blue-100 pl-12">1</td>
        <td className="rounded-br-sm bg-blue-100 pl-12">2</td>
      </tr>
    </tbody>
  </table>

I also used rounded-tl/tr/bl/br-sm to round the th elements and the last td elements in the body of the table (so their corners don't point out of the border).

This is how this looks visually: Table with rounded corners