Imagenes redondeadas en CSS3

Ya que Freddie nos ha obligado aconsejado aprender CSS3 ( ), estoy haciendo mis primeros pininos pero no se como lograr lo siguiente:

- Tengo una imagen rectangular
- El contenedor tiene esquinas redondeadas (con CSS3 radius y sombras)

Como puedo hacer que la imagen se vea como redondeada?

Se que puedo agregar otra imagen en un z-index superior y que cubra las esquinas de mi imagen rectangular, pero no quiero agregar mas imagenes...

Es posible hacerlo solo con CSS3?

He encontrado un truco:

La imagen se pone dentro de un 'p' que tiene estilo inline:

Código HTML :

<p style="background-image: url(imagen.jpg)">
    <img src="imagen.jpg" alt="Super Imagen" />
</p>

En el css, el 'p' tiene esquinas redondeadas y la imagen es invisible:

Código HTML :

p {
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
}

p img {
   opacity: 0;
}

O sea, la imagen se usa para saber el tamaño pero sera invisible. El 'p' se usa para hacer el redondeado y como tiene un estilo inline con la imagen, esta si se ve

No lo he probado pero tiene sentido.

o simplemente al contenedor de la imagen le pones overflow: hidden

HtrMancera escribió:

Muy cierto y funciona perfecto
Gracias!