I am working on a bootstrap html using exclusively inline CSS due to limitations of where it is being created, and I have a circular image with a card underneath using z-index and negative margins. I'd like for the image to have a transparent border, so that there is a space between it and the card below. However, I'm not quite sure how this would be done? I can only assume something with masking, but I can't quite figure out how in particular I'd work it. Basically, I just want to give the card below it a round cutout just bigger than the image so that it resembles a gap - any other method that'd do the same thing would also be awesome
Here is the code as I have it
<div class="container" style="max-width: 900px;">
<div class="row no-gutters">
<div class="col-3">
<div class="card rounded-circle mx-auto" style="z-index: 1; background: url(https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png); height: 150px; width: 150px; margin-top: -50px;">
</div>
<div class="card bg-faded border-0 p-3" style="margin-top: -75px">
<span style="margin-top: 75px; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</span>
</div>
</div>
