Cómo crear una imagen redonda con borde en CSS3

Hoy vamos a hacer un efecto muy vistoso en una imagen, vamos a hacer una imagen circular usando CSS3. En este tutorial vamos a ver lo sencillo que es crear elementos que podrían pensarse en un principio que son para Photoshop o cualquier editor de imágenes.

En el tutorial vamos a lograr un efecto como el de la imagen de este post, ¿muy bueno no? y lo único que necesitamos es una imagen y una capa, lo demás lo hace CSS, así que no perdamos más el tiempo y vamos a ver el tutorial.

¿Qué necesito saber?

Aprendiendo HTML, diferencias entre div y span

Diferencia entre ID y CLASS en CSS usando a Bob Esponja

Aprendiendo HTML, etiquetas

Aprendiendo HTML, hojas de estilo

Empezando el tutorial

HTML

Entonces, para empezar lo que necesitamos es una imagen y una capa. La imagen debe ser cuadrada, en el tutorial uso una imagen de 300x300 píxeles, así que necesitamos que sean medidas iguales.

Entonces, empezamos agregando el código:

<div class="contenedor">
    <img src="imagen.jpg" height="300" width="300" class="imagen" />
    </div>

Lo que tenemos es una capa que tiene una clase contenedor; dentro hay una imagen que tiene una clase llamada imagen. Así luce nuestra imagen actualmente:

CSS

Lo primero es preparar un fondo, para que los efectos en la imagen se puedan notar, para ello trabajamos primero con el documento entero:

body{
    padding: 100px;
    background-color: #ccc;
}
Agregamos un color de fondo gris y un padding o espacio para mover la imagen de la esquina superior izquierda. NOTA: no es necesario este paso, es sólo para darle presentación, al momento de incluirlo en tu blog no ocupes este pedazo de código.

.imagen{
            -webkit-border-radius: 150px;
            -moz-border-radius: 150px;
            border-radius: 150px;   

}

Después añadimos la primera clase, la de la imagen. En ella incluimos un borde, pero fíjense muy bien.

Al ser un borde, para crear efecto de redondez recordemos que para que sea exacto el tamaño debe ser de la mitad de la imagen, en mi caso la imagen es de 300x300, por lo que el radio de borde sería 150px. Una vez que ya insertamos este código tendremos algo así:

Sin embargo, todavía nos falta el último código, el de la capa.

.contenedor{
            background-color: #fff;
            padding: 5px;
            width: 300px;
            -webkit-border-radius: 150px;
            -moz-border-radius: 150px;
            -webkit-box-shadow: 1px 1px 10px #484848;
            border-radius: 150px;   
        }

Lo que hago es añadir un color blanco que actuará de borde, después le pongo un padding o espacio interior de 5 para que se note el fondo blanco, le pongo un ancho de 300, que es el tamaño de la imagen,  y por último le agrego un radio de borde de 150 para igualar al de la imagen, consiguiendo algo como esto:

Y con eso tenemos nuestra imagen completa. Si quieren el archivo para ver el código se los dejo en este enlace. Recuerden que cualquier duda o comentario no duden en dejarla aquí y con mucho gusto les contestaré.