Setting a background on card-body covers the rounded corners on the bottom

Created by: willywongi

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

If you set a background color (also with utilty classes) on the card-body element and you don't have any card-footer, the rounded corners of the bottom border are covered up by the angles of the card-body background. I think that the linked examples are clear. The code in the example is a fork from the first example in the Card documentation page, so it should be really straightforward.

The problem can be resolved applying overflow: clip or overflow: hidden to the container element (the div.card); but I fear that could break other things. Maybe a better option should be to set a inner border radius as with the card-header and card-footer element?

Thank you for your time reading this. Ciao!

Reduced test cases

https://codepen.io/pongi/pen/PoRLrGq https://stackblitz.com/edit/2mfdqf?file=index.html

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

macOS

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

Chrome, Safari, Firefox

What version of Bootstrap are you using?

v5.2.0