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.

15 pensamientos en “Cómo hacer imágenes redondas con CSS

  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¡

  2. Are you seeking effective advertising that actually gets good results? Sorry to bug you on your contact form but actually that’s exactly where I wanted to make my point. We can send your advertising text to websites through their contact forms just like you’re receiving this message right now. You can target by keyword or just go with bulk blasts to sites in the location of your choice. So let’s assume you need to push through an ad to all the web developers in the United States, we’ll grab websites for just those and post your ad message to them. As long as you’re advertising something that’s relevant to that business category then your business will get an awesome result!

    Write a quick note to alfred3545will@gmail.com for details on how this works

Responder a jose cordero Cancelar respuesta

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

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>