CSS box-shadow on round image

Question

I tried to put an fade out effect on a picture. I used box-shadow (inset). There is a slim circle (in my browser at least (ff, chrome on MacOS)) where the box shadow started. Any tricks to hide this thin outer circle? I tried to use an img element in the div and put a box shadow over the div, but failed.

div {
    background-image: url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px 25px #fff;
}

<div>
</div>

Answer 1

Possible workaround: make background clip to the content box and set a minimal padding. Here's an example:

div {
    background-image: url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    box-shadow: inset 0 0 25px 25px #fff;
    background-clip: content-box;
    padding: 1px;
}

<div>
</div>

Answer 2

More workaround: ditch inset shadow and use radial gradient background instead:

div {
    background-image: radial-gradient(closest-side, transparent, transparent 80%, white), url('https://www.welt.de/img/wirtschaft/mobile172774245/5812507447-ci102l-w1024/GERMANY-US-GABRIEL-MUSK-TESLA.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 400px;
    height: 400px;
    border-radius: 50%;
 }

<div>
</div>