v5.3 regression: table clips container's rounded border

[grantbdev]

Prerequisites

• [x] I have searched for duplicate or closed issues
• [x] I have validated any HTML to avoid common problems
• [x] I have read the contributing guidelines

Describe the issue

When upgrading from Bootstrap v5.2 to v5.3, tables inside a container with rounded borders (such as the card component) have a piece visibly missing from the rounded borders at the top where it did not do so in previous versions of Bootstrap. The difference is subtle so you may have to zoom into the corner to see it on the screenshots.

Reduced test cases

v5.2 (expected appearance): https://codepen.io/Grant-Bourque/pen/bNVOLVQ

---

v5.3 (unexpected appearance, same on latest version): https://codepen.io/Grant-Bourque/pen/xbwmYRg

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3.8

[julien-deramond]

By default, Bootstrap tables now (recently) have a solid background (white in your example), which covers rounded corners on a parent wrapper. This was also noticeable in v5.2 with striped tables, where the stripes extended over the wrapper’s border radius (e.g. <table class="table table-borderless table-striped mb-0">):

I'm not entirely sure if this is something we can fix as the solid background fixes other issues for table, or maybe at least try to provide a workaround.

Depending on your use case, one workaround could be to make the table background transparent and let the wrapper provide the background:

<div class="border rounded">
  <table class="table table-borderless mb-0" style="--bs-table-bg: transparent">
    ...
  </table>
</div>

[grantbdev]

@julien-deramond Thanks for looking into it! I noticed that adding table-responsive to the parent wrapper also fixes the border clipping, but good to know that I can tweak the table background if needed.

[julien-deramond]

I noticed that adding table-responsive to the parent wrapper also fixes the border clipping

Interesting! So you can use .overflow-auto instead of .table-responsive:

<div class="border rounded overflow-auto">
    <table class="table table-borderless table-striped mb-0">
    ...
    </table>
</div>