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' />
Imagen original

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;
}
300px de lado, 150px de redondeo.

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;
}
300px de lado, 150px de redondeo, 10px de borde

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;
}
300px de lado, 160px de redondeo, 10px de borde

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.

Únete a la conversación

16 comentarios

  1. gracias por tu ejemplo la verdad lo intente de otras paginas y no me funciono pero el tuyo es muy sencillo y simple practico y si !funciona¡

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: