» [Tutorial blogger] Redondear las imágenes en tu blog

¿Cómo Redondear Una Imagen Con Código HTML o CSS?

Hoy vengo con otro tutoríal súper fácil de hacer, te daré varias opciones, elige la que más te apetezca, pero OJO cambia el enlace de la imagén que he puesto como ejemplo por la que tu quieras redondear, tendrás que subir las fotos en algúna plataforma, tipo tumblr y después copiar el enlace de la imágen.

Ejemplo 1

{Redondear Todas Las Esquinas}



Código:

<img src="https://68.media.tumblr.com/b6aa039550f0f0c043c6b022dccc50e4/tumblr_ok87gvW9R21vilggyo1_540.jpg" style="-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;padding:0px;"/>

Ejemplo 2

{Seleccionar Las Esquinas A Redondear}


Código:

<center><img src="https://68.media.tumblr.com/b6aa039550f0f0c043c6b022dccc50e4/tumblr_ok87gvW9R21vilggyo1_540.jpg" style="-webkit-border-radius: 50px 10px 50px 10px;-moz-border-radius: 50px 10px 50px 10px;border-radius: 50px 10px 50px 10px;padding:0px;"/></center>

Ejemplo 3

{Imagen Circular}


Código:

<center><img src="https://68.media.tumblr.com/b6aa039550f0f0c043c6b022dccc50e4/tumblr_ok87gvW9R21vilggyo1_540.jpg" style="-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;padding:0px;"/></center>

¿Como Colocar El Efecto En Todas Las Imágenes Del Blog?

Diseño // Edicion HTML // [Ctrl + F] & Buscas ]]></b:skin>
ARRIBA Pega El Código Que Deseas:
Efecto 1

img {
padding:0px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
img:hover {
padding:0px;
border-radius:0px;
}

Efecto 2

img {
padding:0px;
-webkit-border-radius: 50px 10px 50px 10px;
-moz-border-radius: 50px 10px 50px 10px;
border-radius: 50px 10px 50px 10px;
}
img:hover {
padding:0px;
border-radius:0px;
}

El Efecto Numero 3 No Es "Estético" Para Todas Las Imágenes Ya Que Sirve Si La Imagen Posee La Misma Medida De Ancho & Alto.