Как сделать круглый div / круглое фото?

Открыл недавно метрику на своем старом сайте, а на него есть несколько переходов с поисковиков. Посмотрел историю поисковых запросов и удивился, почти каждый день есть несколько посещений по запросам “как сделать круглый div”, “как сделать круглое фото” и подобное. Оказывается многих интересует подобный вопрос, так давайте же разберем его.

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

Как видим, мы получили почти круг, а почти, потому, что округление мы применили к прямоугольному блоку, чтобы получился красивый, правильный круг, необходимо прямоугольник превратить в квадрат, для этого блоку задаем одинаковую высоту и ширину:

Готовый код:

  • HTML (код блока)
<div class="circle"></div>
  • CSS (правила для скругления)
.circle {
    width: 100px; /* задаете свои размеры */
    height: 100px;
    border-radius: 50%;
    /* не забываем о кроссбраузерности */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
}

Код для вывода красивых аватаров пользователей с использованием теней и рамок.

  • HTML
<div class="circle">
    <img src="путь_к_файлу" alt="" />
</div>
  • CSS
.circle {
    width: 100px; /* задаете свои размеры */
    height: 100px;
    overflow: hidden;
    background: #fff;
    padding: 5px; /* создание отступов */
    border-radius: 50%;
    /* не забываем о кроссбраузерности */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: #aaa 1px solid;
    box-shadow: 0px 1px 1px 1px #bbb; /* тень */
    -moz-box-shadow: 0px 1px 1px 1px #bbb;
    -webkit-box-shadow: 0px 1px 1px 1px #bbb;
}
.circle img {
    display: block;
    width:100%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

 

В результате получаем такие картинки

Круглые картинки для аватаров