Как сделать изображение круглым на CSS

CSS3 border-radius

Чтобы сделать изображение круглым с помощью CSS, нужно применить свойство border-radius.

Базовое изображение (квадратное)

<img src="/img.png" alt="аватарка"> 

Добавим в файл стилей класс для изображений, которые должны быть круглыми. Например, .avatar для всех аватарок. Используем свойство CSS3 border-radius для добавления закругленных углов к изображению. Значение 50% сделают их круглыми.

img.avatar {
border-radius: 50%;
}

<img class="avatar" src="img.png" alt="аватарка"> 

Теперь изображение стало круглым.

Оригинальные решения получаются при использовании разных радиусов скругления для углов элемента.

img.avatar {
border-radius: 54% 46% 47% 53% / 24% 55% 45% 76%;
}

Генератор таких изображений — https://9elements.github.io/fancy-border-radius/

Bootstrap

Если вы используете Bootstrap 4, добавьте класс rounded-circle (или img-circle для Bootstrap 3) к элементу img, чтобы легко изменить его на круглое.

<img class="rounded-circle" src="img.png" alt="аватарка"> 

Поддержка border-radius браузерами