Как сделать изображение круглым на CSS
Чтобы сделать изображение круглым с помощью CSS, нужно применить свойство border-radius.
Базовое изображение (квадратное)
Добавим в файл стилей класс для изображений, которые должны быть круглыми. Например, .avatar для всех аватарок. Используем свойство CSS3 border-radius для добавления закругленных углов к изображению. Значение 50% сделают их круглыми.
Теперь изображение стало круглым.
Оригинальные решения получаются при использовании разных радиусов скругления для углов элемента.
Bootstrap
Если вы используете Bootstrap 4, добавьте класс rounded-circle (или img-circle для Bootstrap 3) к элементу img, чтобы легко изменить его на круглое.
Оформление изображений на CSS3
При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.
Смотреть демо
Проблема
Из приведенного ниже примера становится понятно, с какими трудностями мы можем столкнуться при применении css-свойств на изображении. Кроме того каждый браузер отображает готовый элемент по-своему. Firefox не хочет делать углы скругленными, но тень к элементу добавляет, а Chrome или Safari отказываются делать и то и другое. 
Решение
Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.
Добавление динамики
Для добавления динамики нужно использовать небольшой jQuery скрипт, который будет оборачивать исходное изображение в тег span со стилем image-wrap. Так же применение скрипта сделает наше исходное изображение фоновым и задаст его ширину и высоту.
После применения мы получим следующий результат:
Примеры (смотреть демо)
Теперь, когда изображение используется в качестве фона, к элементу можно добавить любой стиль. Ниже приведены примеры скругления углов у изображений, создание эффекта окружности, добавление теней и другие приемы оформления.
Эффект окружности
Простой эффект с созданием окружности.
Скругленные углы
Пример со скругленными углами и добавлением тени.
Рельефный стиль
Добавление небольшого выступа (рельефа) в нижней части изображения.
Рельефный стиль со сглаживанием
Тот же эффект, но с размытием нижней границы в 1px.
Врезанный стиль
Используя свойство box-shadow можно делать эффект врезанного в плоскость изображения.
Морфинг и подсветка
В этом примере добавляется свойство transition. При наведении мыши происходит подсветка изображения и изменение его формы до окружности. Эффект подсветки создается благодаря свойству box-shadow.
Эффект глянца
Пример с наложением градиента на верхнюю часть изображения. Достигается за счет использования псевдоэлемента :after.
Эффект отражения
Еще один пример с использованием градиента, но на этот раз для создания эффекта отражения.
Глянец и отражение
Комбинирование двух выше описанных эффектов.
Эффект ленточки
Использование псевдоэлемента :after для создания эффекта ленточки в верхней части изображения.
Морфинг и тонирование
При наведении указателя мыши на картинку мы добавляем радиальный градиент используя псевдоэлемент :after.
Эффект окружности с размытием краев
Радиальный градиент можно также использоваться в качестве маски для создания эффекта сглаженных краев.
How to make rectangular image appear circular with CSS
I’ve used border-radius: 50% or border-radius: 999em , but the problem is the same: with squared images there’s no problem, but with rectangular images I obtain an oval circle. I’m also disposed to crop a part of the image (obviously). Is there’s a way to do that with pure CSS (or at least JavaScript / jQuery), without using a <div> with a background-image , but only using the <img> tag?
10 Answers 10
I presume that your problem with background-image is that it would be inefficient with a source for each image inside a stylesheet. My suggestion is to set the source inline:
My 2cents because the comments for the only answer are getting kinda crazy. This is what I normally do. For a circle, you need to start with a square. This code forces a square and will stretch the image. If you know that the image is going to be at least the width and height of the round div you can remove the img style rules for it to not be stretch but only cut off.
For those who use Bootstrap 3, it has a great CSS class to do the job:
you can only make circle from square using border-radius.
border-radius doesn’t increase or reduce heights nor widths.
Your request is to use only image tag , it is basicly not possible if tag is not a square.
If you want to use a blank image and set another in bg, it is going to be painfull , one background for each image to set.
Cropping can only be done if a wrapper is there to do so. inthat case , you have many ways to do it
Xiper
Сейчас прямо-таки эпоха скругленных уголков.