Как сделать круглые изображения?
Для скругления уголков элементов предназначено свойство border-radius, значением которого выступает радиус скругления. Если взять квадратное изображение и добавить к нему свойство border-radius со значением 50%, то мы получим уже не квадратное, а круглое изображение.
Плюсом использования border-radius является то, что мы можем добавлять к элементу рамку, тень и они будут повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round, с тенью и рамкой.
Пример 1. Круглые изображения
Результат данного примера показан на рис. 1.
Рис. 1. Круглые изображения
Чтобы получилось именно круглое изображение, оно изначально должно быть квадратным. В противном случае отобразится овальная картинка.
См. также
Автор и редакторы
Последнее изменение: 18.09.2018
Редакторы: Влад Мержевич