Internet Explorer Chrome Opera Safari Firefox Android iOS 9.0+ 4.0+ 11.60+ 5.0+ 2.1+ 2.0+ Задача Превратить изображения в круг и добавить вокруг них рамку. Решение Для скругления уголков у элементов в CSS3 предназначено свойство border-radius, значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера. Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round, с тенью и рамкой. Пример 1. Круглые изображения HTML5CSS3IECrOpSaFx Результат данного примера показан на рис. 3. Рис. 3. Рамка в браузере Chrome Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin.