Как сделать круглые изображения?
Превратить изображения в круг и добавить вокруг них рамку.
Решение
Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.
Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round , с тенью и рамкой.
Пример 1. Круглые изображения
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения
Результат данного примера в Opera показан на рис. 1.
Рис. 1. Круглые изображения
Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).
Рис. 2. Рамка в браузере Chrome
Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow . Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.
Пример 2. Рамка из тени
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения 
Результат данного примера показан на рис. 3.
Рис. 3. Рамка в браузере Chrome
Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin .
CSS3 — скругление углов и фон
С самых ранних дней спецификации CSS веб-дизайнеры пользовались стилями для форматирования рамок с содержимым. По мере того как CSS набиралась сил, предоставляемые ею возможности для оформления рамок становились все более впечатляющими, позволяя создавать разнообразные эффекты от затененных колонтитулов до плавающих рисунков с подписями.
А решение в CSS задачи реагирования элементов на наведение курсора превратило плавающие панели в вычурные кнопки и другие элементы с подсветкой, позволив избавиться от неуклюжих прошлых решений на JavaScript. Поэтому неудивительно, что некоторые наиболее популярные и лучше всего поддерживаемые возможности CSS3 могут сделать ваши рамки сногсшибательными независимо от их содержимого.
Скругление углов
Свойство border-radius позволяет скруглять углы рамок. Это свойство можно настроить таким образом, чтобы придавать углам рамок любую кривую форму.
Прежде всего, этому свойству можно присвоить другое, единое значение радиуса границы. Радиус границы — это радиус обрамляющего круга. Конечно же, весь круг не рисуется, а только та его часть, необходимая для соединения вертикальной и горизонтальной границ рамки. Если установить большее значение border-radius, получится больший круг и более плавно скругленный угол. Как и в случае с большинством других измерений в CSS, радиус можно задавать в разных единицах, включая пикселы и проценты. Кроме этого, для каждого угла можно указать отдельное значение border-radius:
aside
Но это еще не все — также можно растянуть круг в эллипс, создавая кривую, более протяженную в одном из направлений. Для этого нужно обрабатывать каждый угол отдельно специальными свойствами (например, свойство border-top-left-radius обрабатывает левый верхний угол), которым присваиваются два значения: одно для горизонтального радиуса эллипса, а другое — для вертикального:
aside
Фон
Одним из быстрых способов создания привлекательных фонов и обрамлений будет использование изображения. Спецификация CSS3 определяет две новые возможности, которые можно использовать для этой цели. Первая возможность — это поддержка нескольких фонов, которая позволяет объединить два (или больше) изображения в один фон. Далее приведен пример кода для создания одного фона из двух изображений, чтобы украсить левый верхний и правый нижний углы рамки:
aside
Первым шагом в реализации этой задачи надо предоставить список любого количества изображений в свойстве background-image. Полученные изображения можно потом расположить в соответствующих местах посредством свойства background-position и указать, повторять ли их, с помощью свойства background-repeat. При этом нужно следить за правильностью порядка, чтобы расположить первое изображение в позиции, указанной в первом значении свойства background-position, второе — во второй и т.д. Результаты применения правила показаны на рисунке:
Браузеры, не поддерживающие составные фоны, полностью игнорируют попытку установить фон этого типа. Во избежание этой проблемы сначала установите резервный фон, присвоив цвет или изображение свойству background или background-image. Только потом предпринимайте попытку установить составной фон, присвоив свойству background-image список изображений.
Скругление углов картинки CSS
Чтобы задать скругление углов изображению с помощью CSS можно использовать свойство border-radius, можно поставить любое значение, если на сайте такая задумка. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее. Можно воспользоваться генератором скругления углов CSS и скопировать уже готовый код.
Сделать из прямоугольного изображение круглое в css
Дано прямоугольное изображение в макете, которое необходимо сделать круглым. Обернул в див, обрезал края, но подвинуть, как на макете, не выходит..Проблема со сдвигом изображение в этом кругу. Может есть фича на Бутстрап какая, мало ли..
.item < margin-left: 150px; >.photo < width: 132px; height: 132px; margin: 0 auto; overflow: hidden; >.personPhoto
