Accordion flush in card has missing corners on bottom

[ianw]

Prerequisites

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

Describe the issue

When I put an accordion in flush mode inside a card the bottom is slightly broken up

There isn't an exact example of the accordion in a card, but there is a of flush list-group in https://getbootstrap.com/docs/5.3/components/card/ and I feel like I'm doing the same thing where you basically have the accordion after the card-header

 <div class="card">
    <div class="card-header">
         Header
     </div>
      <div class="accordion accordion-flush" id="accordionExample">
     ... accordion follows ...

I see this in Firefox and Chrome on the codepen example below

Reduced test cases

A codepen example of this is https://codepen.io/iwienand/pen/LYwdELE

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

Linux

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.3

[coliff]

Cards have border-radius by default so I'd suggest simply adding the 'rounded-0' utility class to the .card to fix it.

[julien-deramond]

Cards have border-radius by default so I'd suggest simply adding the 'rounded-0' utility class to the .card to fix it.

Thanks, coliff! This is definitely the way to go. Since a card is treated as a simple container, the framework doesn't apply special CSS for handling specific combinations of components within the card.
I'm closing this issue.