Как сделать круглый 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%;
}

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