Search code examples
htmlcssborder-radius

how to apply border radius to the face only?

Hello I have some images that I need to apply border radius to (make images into circles) but I want to do the face only. So how do I apply border radius to the face only or the top part of the image only? The customer doesn't want too much body showing.

BEFORE enter image description here

AFTER enter image description here

Solution

  • Your best option would be to crop the photo in your preferred photo editor.

    If you must do it with code, you need to change the position of the image within its container or simply use it as a background-image and change its background-position:

    .img {
  width: 300px;
  height: 300px;
  background-image: url(https://i.sstatic.net/tiCHu.png);
  background-position: center top;
  border-radius: 50%;
  
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2)
}
    <div class="img"></div>