Bootstrap: No rounded borders for top image overlay cards when adding a background to overlay and suggestion for fix

[Michelangelo1984]

Bootstrap version 4.3.1
Machine Windows 10,
Tested in Firefox (latest) and Chrome (latest)

I found myself having issues with rounded borders when an image is placed as top element in combination with an overlay with background in a card-deck. It does lose it's rounded borders with an overlay with background applied. However I suggest adding a style to the overlay so that the card keeps it's rounded borders for the overlay.

<div class="card">
<img class="card-img-top" src="/assets/images/image.jpg" alt="Card image cap">
<div class="card-img-overlay d-flex justify-content-center">

I added this style to bootstrap CSS file:

.card-img-overlay {
  border-radius: calc(0.25rem - 1px);
}

Codepen that demonstrates the issue when applying a background to the overlay: https://codepen.io/anon/pen/MNyZzg

[coliff]

Bug reports must include a Reduced test case using CodePen or JS Bin. Can you add one?

[Michelangelo1984]

@coliff Done! Sorry, hadn't the time to properly look into the problem, but the rounded borders break when applying a background to the image overlay class.

[coliff]

@Michelangelo1984 - an alternative solution would be to simply add the css class rounded like follows:

<div class="card-img-overlay rounded d-flex justify-content-center">

[Michelangelo1984]

@coliff Thnx, yes that could also be a solution. Didn't know of that class. Still I think that since it is part of the card it should automatically be rounded and not break when adding a background or other css you want to add.

[XhmikosR]

Does this happen with the latest v4.3.1? The codepen is using 4.1.3.

[Michelangelo1984]

@XhmikosR It does happen with both versions (tested). So not a new bug, was just unnoticed.