Borde Redondeado en las Imagenes

CSS3 ha implementado muchas mejoras y nuevas funciones como son los border-radius que nos ayudan a redondear elementos como imágenes, contenedores, etc. Este código muestra un ejemplo para redondear los bordes de una imagen, los avatares e imágenes con bordes redondeados se están haciendo cada ves mas popular en los sitios web.

<span class="rounded">
    <img src="avatar.jpg" />
</span>​
.rounded{
    display:inline-block;
    position:relative;
    overflow:hidden;
}

.rounded > img{
    vertical-align:top;
    -webkit-border-radius:100em;
}

.rounded, .rounded:before{
    -moz-border-radius:100em;
    border-radius:100em;
}

.rounded:before{
    content:'';
    display:block;
    position:absolute;
    left:0;
    right:0;
    width:100%;
    height:100%;
    margin:-10em;
    border:10em solid white; /* color de fondo en los bordes */
}​

jsFiddle Demo

Recomendado