Is there a thing such as border-padding?

Question

I have two SVG icons, and all I want to do is apply a background, add some padding, and make the padding appear round (border-radius). When adding the padding all is fine and appears as expected, it's only when trying to make it round.

No matter what the amount of padding is, the SVG's are cut off.

SVG with 10px padding and 50% border-radius:

For reference, this is what the SVG normally looks like:

As I explained above, I tried many different padding sizes, but all result in a part of the SVG being cutoff. I've searched on the topic, but the only things I could find were:

Link 1 - It was about another topic not related to mine.

Link 2 - I tried border-block-start, but unfortunately nothing happened.

Can anyone help me?

Answer 1

This is what I was referring to. Idk if this is what you are asking or not.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, blue, green);
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.img-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    width: 65%;
    border-radius: 23px;
    object-fit: contain;
    overflow: hidden;
    
}

.img-container > img {
    height: 138%;
    width: 149%;
 }

<div class="container">
  <div class="img-container">
    <img src="https://i.sstatic.net/831mz.png">
  </div>
</div>