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

[willywongi]

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

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

[louismaximepiton]

I can see a regression with your proposal, with for example dropdown inside the card (tried with .dropend on your example instead of the button). Still looking around for a solution !

[mdo]

If you move the .text-bg-success class up to the .card level, there's no issue.

[louismaximepiton]

I think it would be more understandable, logical and practical for folks to write their utilities wherever they want.

For example in Background & color, if I want something like that:

• Right now, if I don't wanna write some additional CSS, I need to set up the whole card in .text-bg-dark. Then I set the .card-header, that is particularly rounded in CSS, with .text-bg-primary. Then I'll need to change the border-color etc...

• Right now, if I'm able to add some CSS, I need to add a border-radius to the .card-body if it is the :last-child and then add my utilities. If I only set my bg utility, I get:

• With the associated PR, it removes the distinction between classes to only have :first-child and :last-child and so they could use utilities with their wish.

[mdo]

That's helpful, thanks! I've slated this for v5.3.0 for now as we try to get v5.2.1 out the door :). I think this change would be more beneficial in that release instead of here as a patch.