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

Created by: 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