how to apply border radius to the face only?

Question

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

AFTER

if i do that it shows the whole body customer just wants the head only — jr005, Apr 07 '21 at 22:11

score 1 · Accepted Answer · answered Apr 07 '21 at 22:11

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.stack.imgur.com/tiCHu.png);
  background-position: center top;
  border-radius: 50%;
  
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2)
}

<div class="img"></div>

how to apply border radius to the face only?

1 Answers1