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.

By the way, you should paste your code in the body of the question between "`" marks like so , rather than link to your web app to make it easier for future readers to reference the specific code in question alongside the answer. this is likely why you are receiving so many downvotes, and me for answering a question that goes against The Stackoverflow Way.