CSS - Как сделать элемент круглым

  Время от времени возникает необходимость преобразования блочного элемента придав ему форму круга. Это может быть обыкновенное равностороннее графическое изображение смайлика, автарки или любого другого назначения в котором требуется отобразить только центральную позицию ограниченную окружностью. Самым распространённым способом является стилизация равностороннего блока или картинки с помощью селектора  border-radius: 50%; задав ему 50% занчение.

<style>
.round {
  border-radius: 50%;
}
</style>

<img src="http://my-skills.ru/graphics_archive/icons/audio/128-icons-audio-HtyUSJmXxiMp.jpg" alt="Значок" width="120" height="120" class="round">

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

<style>
.round {
  width: 120px; height: 120px;
  border-radius: 50%;
  background-size: 110%;//Увеличиваем масштаб фонового изображения
  background-position: -8px -3px;//смещаем позицию изображения для центрирования
  background-image:url(http://my-skills.ru/graphics_archive/icons/internet/128-icons-internet-JwRPkadC9EWY.png);
}
</style>

<div class="round"></div>

ТОП 10 случайных публикаций