Чтобы сделать круглое изображение с помощью CSS можно использовать свойство border-radius со значением 50%, можно поставить значение меньше, если на сайте такая задумка и просто сделать мягкие углы у изображения. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее.
Пример
HTML
<img src="image.jpg" alt="" class="circle"/>
CSS
.circle {
border-radius: 50%; /* Скругление углов изображения */
border: 5px solid #fff; /* Цвет и ширину рамки */
box-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */
}
Для того чтобы получить круглое изображение, размеры картинки должны быть такими, чтобы она изначально была квадратной, если картинка прямоугольная, то получится овал как на примере ниже.
