La cantidad de posibilidades que tendremos cuando se estandarice CSS3 serán unas cuantas y nos harán la vida mucha más fácil.

Hoy les quiero comentar como redondear una imagen solo con CSS3 por medio de un gran artículo de la gente de Wp Content Themes. Anteriormente si queríamos lograr este efecto tendríamos que jugar bastante con nuestra hoja de estilo para lograrlo, pero con CSS3 son solo dos líneas mas, utilizaremos el atributo -webkit-border

Como ya lo mencione CSS3 no está estandarizado por lo que solo funcionara con Firefox, Safari y Chrome.

Esta es nuestra imagen final:

Y para todos aquellos que no utilizan algún navegador de los mencionados, así es como se verá el resultado final:

Para lograr este efecto solo es necesario dar estos atributos a la imagen:

<div class="round-image" style="border: 1px solid rgb(255, 255, 255); background: transparent url(http://eliseos.net/wp-content/uploads/2009/04/mark_zero.jpg) repeat scroll 0% 0%; width: 200px; height: 200px; -moz-border-radius-topleft: 200px; -moz-border-radius-topright: 200px; -moz-border-radius-bottomright: 200px; -moz-border-radius-bottomleft: 200px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div>

Si trabajamos con WordPress, podemos hacer que todas las imágenes de nuestras entradas se muestren de esa manera, solo es necesario insertar unas lineas más dentro del loop.

Recomiendo leer todo el artículo, donde se explicara un poco mejor su funcionamiento y varios opciones y ejemplos más.