Si alguna vez trató de usar border-radius
sobre <img>
‘s, sabes que no siempre funciona (incluso si el navegador admite esa propiedad CSS3, como Firefox 3 y Opera 11). La raíz de esto es que la imagen es contenido, no un contenedor, y el contenedor es lo que se redondea con border-radius
. Jonathan Neal tiene una demostración para hacer que esto funcione. Esencialmente, establece el fondo del elemento de la imagen en sí mismo y luego cambia el src de la imagen a un URI de datos GIF transparente.
Actualización de noviembre de 2012: El enlace de este original está caído ahora, pero de todos modos no sugiero usar cosas sofisticadas como esta. Aquí hay un lápiz de prueba que muestra solo un radio de borde antiguo normal en imágenes que funciona en todos los navegadores modernos.
Enlace directo →