esquinas redondeadas en las imágenes

Question

http://jsfiddle.net/48Y37/

quiero esquinas redondeadas en las dos esquinas en la parte superior de la imagen. Técnicamente está ahí pero está siendo cubierto por la imagen. He buscado en toda la web y he visto a personas hablar sobre overflow: hidden; o incluso JavaScript (lo cual quiero evitar tanto como sea posible), pero nunca pude implementarlo en mi código existente.

Gracias de antemano.

<section class="container"> 
    <header> 
     <img src="http://i.imgur.com/CpL8u.png" style="box-shadow: 0px 0px 10px #888;" /> 
    </header> 
    <section class="body"> 
     Lorem ipsum blahblah I don't know the rest. 
    </section> 
</section> 

CSS:

header { 
    width: 640px; 
    margin-left: -10px; 
    margin-top: -10px; 
} 
section.container { 
    background: #fff; 
    width: 620px; 
    margin: auto; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    padding: 10px; 
    box-shadow: 0px 0px 20px #888; 
} 
section.body { 
    margin-top:10px; 
} 

Answer 1

Es necesario añadir un border-radius a esa imagen: http://jsfiddle.net/WouterJ/48Y37/1/

Answer 2

Para redondear la imagen real, usted tiene que asegurarse de que la clase de la etiqueta <img> en realidad tiene la border-radius propiedad. Por ejemplo:

<img class="roundrect" src="/whatever-your-source-is.png"> 

Y el CSS correspondiente se vería así:

.roundrect { 
border-radius: 15px; 
} 

Answer 3

1. Copiar la imagen con la herramienta que corta con tijeras y pegar en Paint .
2. Elija la forma Rectángulo redondeado y cambie el color a blanco.
3. Elija el tamaño más grande para el Rectángulo.
4. Luego coloque el borde redondeado blanco alrededor de la imagen.
5. Luego copie y pegue la imagen redondeada allí donde lo necesite.