Cómo hacer imágenes redondas con CSS

Personalmente, me encantan los avatares redondos que aparecen en algunos sitios, como por ejemplo Google Plus, y con CSS es muy sencillo hacer que cualquier imagen aparezca como la que se puede ver en la cabecera.

En este post veremos cómo es posible hacerlo rápidamente mediante una clase CSS, que aplicaremos a todas las imágenes en las que queramos reproducir el efecto.

Empezaremos insertando la imagen en el archivo HTML de la manera habitual, pero asignándole la clase CSS que crearemos más adelante:

<img src='dott.jpg' class='imgRedonda' />

Ahora, crearemos la clase CSS imgRedonda con la que aplicaremos el estilo redondo de la imagen. La idea es bien sencilla: fijaremos el ancho y el alto al mismo valor, para hacer que la imagen sea un cuadrado, y definiremos el radio de redondeo de las esquinas como la mitad del lado del cuadrado. Por ejemplo, si la imagen tiene un ancho y alto de 300 píxeles, el radio tendrá un valor de 150 píxeles:

.imgRedonda {
    width:300px;
    height:300px;
    border-radius:150px;
}

Y ya hemos conseguido el efecto de redondeo que queríamos. Pero, ¿y si queremos aplicar un borde a la imagen? (lo que se va a ver ahora aparece también al aplicar padding) ¿Cómo quedaría ésta? Vamos a verlo, aplicando un borde exagerado de 10 píxeles para ver el problema:

.imgRedonda {
    width:300px;
    height:300px;
    border-radius:150px;
    border:10px solid #666;
}

Como se puede apreciar, ya no queda redonda: aparece un plano donde irían los lados del cuadrado. Para evitar ésto, hay que sumar al radio el grosor del borde (y del padding, si también se hubiese empleado). En nuestro ejemplo, el radio pasaría de 150px a 160px. Vamos a ver cómo queda ahora:

.imgRedonda {
    width:300px;
    height:300px;
    border-radius:160px;
    border:10px solid #666;
}

Ahora sí que tenemos un círculo perfecto, sin planos, y con un buen borde, dando un resultado bastante espectacular a nuestras imágenes.

Como último detalle, hay que tener en cuenta que al forzar el alto y ancho de la imagen, ésta se puede deformar un poco si no es más o menos cuadrada sino muy rectagonal.