Как сделать изображение круглым на 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 браузерами

 

Апсолямов Михаил
Автор — Михаил Апсолямов
Продвигаю бизнес в интернете: разработка стратегии, создание сайта, SEO, контент-маркетинг, SMM, обслуживание и техподдержка проектов. Опыт — 15 лет. Подробнее
наверх