Redondear las imágenes con CSS

Comparteme :

En esta entrada voy a explicar cómo redondear las imágenes utilizando una de las nuevas funciones que trajo CSS3, el border-radius. Como ves, abajo de este párrafo se ve una demostración.

Para poner en funcionamiento el truco, primero hay que agregar los estilos a la plantilla:

Ir a Plantilla, Editar HTML y localizar la línea ]]></b:skin> (CTRL + F). Antes de esta línea pegar lo siguiente:

.borde-redondeado > img {
-webkit-border-radius:1.5em;
border-radius:1.5em;
-moz-border-radius:1.5em;
border:none !important;
}

Guardar los cambios.

Ahora cuando quieras usar este efecto en alguna imagen tendrás que usar este código:

<span class="borde-redondeado"><img src="URL de la imagen" />
</span>

Aclaraciones:
1.5 em es la medida que tiene el redondeado. Mientras más grande sea más redonda se verá la imagen.
En el segundo código habrá que editar lo azul por el link de la imagen.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Redondear las imágenes con CSS.

Comparte

BLOGUERO TUTORIAL