Из общей темы по оформлению #44, пост 997 от rps
Код:
<style type="text/css">
.pa-avatar {
position: relative;
width: 80px;
height: 80px;
}.pa-avatar img {
width: 80px;
height: 80px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}#pa-avatar {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 80px;
height: 80px;
-webkit-box-shadow: inset 0 0 8px rgba(50, 50, 50, 0.4);
-moz-box-shadow: inset 0 0 8px rgba(50, 50, 50, 0.4);
box-shadow: inset 0 0 8px rgba(50, 50, 50, 0.4);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
</style>Код:
<script type="text/javascript">
var li; var i = 0;
li = document.getElementById("pun-main").getElementsByTagName("li");
for (i in li) {
if (li[i].className == "pa-avatar item2") li[i].innerHTML += "<div id='pa-avatar'></div>";
}
</script>Первое - в ХТМЛ-верх, второе - в ХТМЛ-низ.
Добавлено:
Хотя, поскольку тени и скугление углов тоже css 3 уровня, можете попросить Deff реализовать его задумку. Так или иначе, пользователи в старых версиях браузеров не увидят ни тени, ни скруления.
Аватарки с белым фоном выглядят не вжато, а наоборот выпукло с тенями 
По ходу, этот вариант не подойдёт.
А вы можете наложить картинку на аватарку? Пусть будут тестовые размеры аватарки 53х53, картинка для наложения:
