Как сделать круглую рамку на сайте для фотографий?
Как сделать на сайте круглую рамку для фото?
Желательно при помощи HTML и CSS
Можно конечно и JavaScript, но тогда поподробнее объясните как...
Для скругления уголков у элементов в CSS3 предназначено свойство border-radius, значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.
Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round, с тенью и рамкой.
вот ссылка на подробный ответ: http://htmlbook.ru/faq/kak-sdelat-kruglye-izobrazheniya
На фото которое у вас в диве присваиваете:
.userphoto img {
border-radius: 50%; //закругление картинки - ровный круг для любого размера
border: 7px solid #ccc; //обводка картинки и цвет
}