White border around images and setting the border: 0; doesn't do anything

I've been trying to remove this white border on a rectangular background picture, and nothing seems to work.

I've tried setting the border and outline to 0, and tried putting that as !important, but nothing, no matter the way I do it, seems to work.

My code is:

body {
    background-color: #000;
}

.card__article {
     position: relative;
     overflow: hidden;
     width: 25vw;
     height: 450px;
     }

.card__img {
    display: block;
    width: 100%;
    border-radius: 1.5rem;
    }

.card_mini_1 {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-smile.svg/1024px-Face-smile.svg.png");
    background-size: cover;
    height: 100%;
}

<article class="card__article">
    <img class="card__img card_mini_1"></img>
</article>

Thanks so much for your help.

Generally, I would use the src property of your img tag to populate the images instead of the background-image style to do so eg., <img src="images/portfolio_pizza.png">

But if you are unable to do that for some reason, you don't really need that to be an image tag in the first place and can change it to a div, which removes that border.