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

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

На этом уроке мы научимся делать круглые изображения. Для этого мы должны будем поместить изображения в круг и сделать рамки вокруг них.

Круглые изображения:

1. Чтобы скруглить уголки фотографий необходимо добавить свойство border-radius, значением которого выступает радиус закругления. Добавив к квадратному изображению данное свойство мы получим круглое изображение.
2. Создаем новый блокнот
   
3. Вводим данные с изображения:
   
4. Сохраняем блокнот
   
   Результаты нашей работы:

   

   Браузеры Chrome и Safari некорректно отображают скруглённые уголки. В данном случае можно посоветовать отказаться от рамки или же заменить border на свойство box-shadow.

   Рамка из тени:

   1. Открываем блокнот
      
   2. Вводим данные с картинки:
      
   3. Сохраняем блокнот
      

   Конечный результат нашей работы: