title: Tailwind border and border-radius (rounded) issue on html table headers
body: <p><a href="https://i.stack.imgur.com/mXtrw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mXtrw.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/pBrs2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pBrs2.png" alt="enter image description here" /></a></p>
  <pre><code>     &lt;table
          {...getTableProps()}
          className=&quot;text-left bg-purple-500 rounded-full border-2 border-accent&quot;
        &gt;
          &lt;thead className=&quot;text-left bg-purple-500 rounded-full border-2 border-accent&quot;&gt;
            {headerGroups.map((headerGroup) =&gt; (
              &lt;tr
                {...headerGroup.getHeaderGroupProps()}
                className=&quot;text-left bg-purple-500 rounded-full border-2 border-accent&quot;
              &gt;
                {headerGroup.headers.map((column) =&gt; (
                  // Add the sorting props to control sorting. For this example
                  // we can add them into the header props
                  &lt;th
                    {...column.getHeaderProps(column.getSortByToggleProps())}
                    className=&quot;p-4 bg-green-700 rounded-full &quot;
                  &gt;
                    {column.render(&quot;Header&quot;)}
                    {/* Add a sort direction indicator */}
                    &lt;span&gt;
                      {column.isSorted
                        ? column.isSortedDesc
                          ? &quot; &quot;
                          : &quot; &quot;
                        : &quot;&quot;}
                    &lt;/span&gt;
                  &lt;/th&gt;
                ))}
              &lt;/tr&gt;
            ))}
          &lt;/thead&gt;
      ```
  </code></pre>