Существует несколько способов с помощью которых можно сделать фото круглым, но во всех этих способах используется css свойство border-radius.

Можно например нужное нам изображение обернуть в обертку из div этому div задать border-radius равный 50% например будем использовать это изображение 

сейчас оно без всяких стилей и выводится в оригинале.

Сделаем следующее.

<div style="border-radius: 50%;width: 100px;height: 100px;overflow: hidden;">
    <img src="https://sefil.ru/uploads/actors/2022-09/3d6813be67f6ff44a5-dzhonni-depp.jpg" alt="">
</div>

Но как видите оно не очень аккуратное и нам нужно немного усовершенствовать код, для этого нужно добавить картинке ширину и высоту в 100%

<div style="border-radius: 50%;width: 100px;height: 100px;overflow: hidden;">
    <img src="https://sefil.ru/uploads/actors/2022-09/3d6813be67f6ff44a5-dzhonni-depp.jpg" alt="" style="width: 100%;height: 100%;">
</div>

Но фото как бы сжимается потому что мы задали размер 100 на 100 а изначально фот выше и из за этого оно сжимается чтобы этого не было добавим свойство object-fit: cover;

<div style="border-radius: 50%;width: 100px;height: 100px;overflow: hidden;">
    <img src="https://sefil.ru/uploads/actors/2022-09/3d6813be67f6ff44a5-dzhonni-depp.jpg" alt="" style="width: 100%;height: 100%;object-fit: cover;">
</div>

Это один из способов второй же мы просто задаем нужные нам свойства сразу изображению.

    <img src="https://sefil.ru/uploads/actors/2022-09/3d6813be67f6ff44a5-dzhonni-depp.jpg" alt="" style="border-radius: 50%;width: 100px;height: 100px;object-fit: cover;">

Как видите сделать фото круглым не так уж и трудно.

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .