Круглое изображение CSS

Чтобы сделать круглое изображение с помощью CSS можно использовать свойство border-radius со значением 50%, можно поставить значение меньше, если на сайте такая задумка и просто сделать мягкие углы у изображения. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее.

Пример

HTML


<img src="image.jpg" alt="" class="circle"/>
      

CSS


.circle {
    border-radius: 50%;  /* Скругление углов изображения */
    border: 5px solid #fff; /* Цвет и ширину рамки */
    box-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */
}
     

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