При решении поставленной задачи я решил воспользоваться современными возможностями CSS 3. Реализация «круглых аватарок» получилась простой и гибкой. Метод основан на свойстве border-radius. 

Для отображения аватара я использовал вот такой HTML-код:

<div class="avatar">
    <img src="http://autokadabra.ru/system/uploads/users/1/1938/small.png" alt="avatar" />
</div>

CSS-стили для этого кода выглядят следующим образом:

.avatar{ /* селектор для класса avatar */
    float: left; /* прижимаемся к левому краю, обтекание справа */
    background: #fff; /* фон */
    width: 50px; /* ширина */
    height: 50px; /* высота */
    padding: 5px; /* внутренние отступы(верх, право, низ, лево) */
    border: 1px solid #999; /* граница(ширина, тип, цвет) */
    border-radius: 50%; /*скругление равно 50 процентам от общей ширины, фактически 25 пикселей, вот и круг получили(ещё есть с префиксом -moz и -o) */
    box-shadow: 0px 1px 1px 1px #bbb /* смещение по горизонтали, смещение по вертикали, размытие, увеличение и цвет */
}
.avatar img{ /* селектор для картинки, которая "внутри" класса avatar */
    display: block; /* картинка выводится как блок, по ширине будет равен родителю(диву в котором находится) */
    width: 100%; /* ширина 100% */
    border: 0; /* граница нулевая */
    margin: 0; /* внешний отступ отстутствует */
    border-radius: 50%; /* читай выше */
}