Efectos de bordes redondeados en las im?genes

Una de las ventajas del CSS3 es porder aplicar bordes redondeados sin complicarnos la existencia, siempre y cuando quien vea la p?gina use un navegador moderno, porque ya sabemos que en navegadores antiguos muchos estilos no son reconocidos.

Y una forma de poder usar estos bordes es con las im?genes de las entradas, a las que les podemos aplicar algunos efectos al pasar el cursor tales como sombreado y bordes redondeados acompa?ados de transiciones.

La declaraci?n del borde redondeado es border-radius, y en ella podemos aplicar el borde redondeado a las cuatro esquinas de la imagen, o s?lo a algunas de ellas.

A continuaci?n ver?s unos ejemplos de estos bordes y c?mo se comportan las im?genes al pasar el cursor sobre ellas.

Puedes usar el que m?s te guste, s?lo copia el c?digo, luego entra a la Edici?n HTML de la plantilla y pega dicho c?digo antes de ]]></b:skin>

.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Estos efectos se aplicar?n a todas las im?genes de las entradas. Si quiseras usarlo s?lo para las que t? elijas entonces cambia .post-body img por .redondeado y .post-body img:hover por .redondeado:hover
Luego en el c?digo de tu imagen agrega la clase:

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

Esos son s?lo unos ejemplos, y a partir de ellos cada quien puede modificarlo tanto como quiera agregando o eliminando m?s estilos, eso como siempre ya depende de cada quien. Pero como has podido ver, podemos conseguir que las im?genes de las entradas se vean m?s atractivas, que interact?en con el lector, y tan s?lo ha sido a?adiendo un poco de CSS.