Is there a way to reduce the radius of an image? - css

Question

I've got an image, with properties defined as follows:
.icon {
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
}
Due to the border-radius, the image is in a circle. Is there a way to tighten this circle by some number of pixels, such that some "outer layers" of the circle are shaved off, without scaling the image down with it?

Answer 1

A combination of background-size and background-position properties allow you to resize an image as a background relative to the element it is a background of. Sorry if that is a mouthful, in other words, if this is your initial approach:
.icon {
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
}
<img src="https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" class="icon" />
Instead if the image is applied as a background image you can control the size relative to the element:
.icon {
background-color: white;
background-image: url('https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg');
background-position: center center; /* two values for horizontal and vertical positioning, you can use px or other units to configure distance too. */
background-size: 180% 180%; /* also two values for height and width, here I am using greater than 100% to make the image larger than the element, achiving the effect you are looking for */
border-radius: 50%;
width: 50px;
height: 50px;
}
<div class="icon" role="img" aria-label="this puppy looks a little closer, right?"></div>

Answer 2

I can think of a few different ways to do this, depending on how "clean" you need this to be. Read the comments in-line for a description of what is going on.
/* Your code, as is: */
img {
background-color: white;
border-radius: 50%;
width: 150px;
height: 150px;
}
/* Using clip-path (not supported in IE/Edge): */
img.clipped {
clip-path: circle(28.6% at 50% 50%);
}
/* Using a background image: */
span.image {
width: 150px;
height: 150px;
display: inline-block;
background: url(https://via.placeholder.com/150);
border-radius: 50%;
box-shadow: inset 0px 0px 0px 25px #fff;
}
/* Using a span as a 'wrapper': */
span.image_wrapper {
width: 150px;
height: 150px;
display: inline-block;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 25px #fff;
}
<!-- Your code, as is: -->
<img src="https://via.placeholder.com/150" />
<!-- Using clip-path (not supported in IE/Edge) -->
<img src="https://via.placeholder.com/150" class="clipped" />
<!-- Using a background image: -->
<span class="image"></span>
<!-- Using a span as a 'wrapper' -->
<span class="image_wrapper">
<img src="https://via.placeholder.com/150" class="clipped" />
</span>
For clip-path see: https://caniuse.com/#search=css%20clip