Для того, чтоб изображение было круглым, то здесь все делаем через CSS, а точнее через свойство border-radius, что отвечает за скругление углов. Где просто поставить 50px, где картинка, что идет аналогично по высоте и ширине станет круглой по своему формату.
Также здесь есть свою плюсы, которые заключаются в оформление, ведь border-radius является то, где можно прописать к элементу рамку, также тени, что будет все отображаться по контуру круга.
HTML
Код
<p><img src="http://zornet.ru/_fr/83/2760176.jpg" alt="" class="krugi-uglov">
<img src="http://zornet.ru/_fr/83/9896544.jpg" alt="" class="krugi-uglov">
<img src="http://zornet.ru/_fr/83/2478295.jpg" alt="" class="krugi-uglov"></p>
CSS
Код
.krugi-uglov {
border-radius: 50%;
border: 3px solid #006480;
box-shadow: 0 0 5px #524d4d;
}
Здесь задаем класс под названием krugi-uglov и закрепляем за картинкой, и сразу добавляем оттенок цвета и теней, чтоб смотрелось красивей.
Демонстрация
