Space image inside the circle

I have this fiddle https://jsfiddle.net/obzpLy1g/

Basically its an image inside a red circle. Would it be possible to space the image inside the circle

My html looks like this

<div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
      background-size: cover;
      background-position: center;
      background-origin: padding-box;
      background-clip: padding-box;
      padding: 20px;
      border: 1px solid red;
    "></div>

My code do not give the image inside the circle a padding of 20px like i would have wanted.

>Solution :

To ensure you get the whole of the image inside the circle, but still have padding of 20px all round, this snippet puts the image as background to the before pseudo element. That way it doesn’t get clipped by the radius setting of the div.

It sets the size to contain to ensure all the image is visible. The given image is rectangular rather than square so it doesn’t seem to make sense to clip it if you don’t want a headless chicken.

div::before {
  content: '';
  width: calc(100% - (2 * var(--padding)));
  height: calc(100% - (2 * var(--padding)));
  position: absolute;
  background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div style="
      width: 50px;
      height: 50px;
      border-radius: 50%;
      --padding: 20px;
      padding: var(--padding);
      border: 1px solid red;
      position: relative;
      background-color: #eeeeee;
    "></div>

Note: the snippet gives the div a gray background for demo purposes, just to make clear the exact positioning and size of the image.