The padding with border radius overlaps the image inside - html

Question

I have an <img> and I'm giving it a background-color, a padding along with a border-radius.
The problem is that even though I have a padding and so there's a lot of space between the inner image and the edges of the box, the border-radius apparently gets applied to the image inside as well, and therefore causes the edges of the inner image to be cut off. Here's what it looks like:
https://i.stack.imgur.com/tYKfh.png
.element img {
padding: 25px;
border-radius: 50%;
background-color: #6e4fff;
height: 30px;
width: 30px;
}
<div class="element">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>

Answer 1

Move the styling to the parent element, take out the padding, and center with flexbox:
.valueelement {
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.valueelement img{
height: 30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>

Answer 2

Another solution:
.valueelement img {
height: 30px;
margin: 0 auto;
display: block;
}
.valueelement {
padding: 25px;
background-color: #6e4fff;
border-radius: 50%;
overflow: hidden;
height: 30px;
width: 30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png" />
</div>

Answer 3

Simply use the calc method when positioning your image in conjunction with display:block and position:absolute. Formula: calc(50% - imageWidth/2), then do the same for the height.
JsFiddle: https://jsfiddle.net/h867qgcL/
.valueelement {
position:relative;
border-radius: 50%;
background-color: #6e4fff;
height: 80px;
min-width:80px;
width:80px;
}
.valueelement img {
position: absolute;
padding:0;
display:block;
margin-left:calc(50% - 13px);
margin-top:calc(50% - 15px);
height:30px;
}
<div class="valueelement">
<img src="https://i.imgur.com/L8JEkBk.png"/>
</div>