Rounded avatars with CSS

by Viruthagiri

HTML

<img class="avatar" src="http://autokadabra.ru/system/uploads/users/1/1938/small.png?1318258804" alt="avatar" />
<img class="avatar" src="http://autokadabra.ru/system/uploads/users/18/18340/small.png?1318432918" alt="avatar" />
<img class="avatar" src="http://autokadabra.ru/system/uploads/users/20/20303/small.png?1319912650" alt="avatar" />
<img class="avatar" src="http://autokadabra.ru/system/uploads/users/19/19506/small.png?1318360757" alt="avatar" />

CSS

/* Rounded avatars */
.avatar {
    float: left;
    margin-top: 1em;
    margin-right: 1em;
    position: relative;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}