CSS, esquinas redondeadas que no funcionan

Tengo dos fotos una encima de la otra:

enter image description here

Aquí está el código:


Pavadinimas
Automatinis mechanizmas
Miegamas mechanizmas

Spyruoklės
Ilgis/Plotis/Aukštis
Ilgis/Plotis
300/300/300
miegamoji dalis 100/100

Quiero que la imagen en la parte superior sea con esquinas redondeadas como esta:

enter image description here

Mis clases de CSS es:

 .picture{ position:relative; width:400px; height:200px; float:left; margin-left:48px; margin-right:35px; margin-bottom:90px; margin-top:10px; } .picture-content{ position:absolute; bottom:0px; width:360px; height:211px; } .picture-grey{ position:absolute; bottom:-65px; left:15px; height:243px; width:407px; float:left; } .picture-photo{ position:absolute; width:380px; height:223px; -moz-border-radius: 50px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; top:0px; left:0px; } 

¡Pero lamentablemente las esquinas redondeadas no funcionan en absoluto! Por qué no? ¿Hay algún problema que yo no sepa?

Este es un viejo problema con Firefox (y probablemente también con algunos otros navegadores); no recortó las imágenes hasta la última versión de Firefox:

Firefox -moz-border-radius no recortará la imagen?

Solo por curiosidad, ¿puedes probar lo siguiente ?:

 .picture{ position:relative; width:462px; height:305px; margin:0px; padding:0px; background:url('http://sofes.miximages.com/php/w0mOg.png') no-repeat; background-position:50% 50%; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } 

Tengo la última versión de firefox, así que no puedo verificar si funciona en versiones anteriores, pero tendría sentido si lo hiciera. Firefox ha sido capaz de cortar divs durante bastante tiempo.

¡quieres que tu imagen sea redonda! no DIV!

 .picture-photo img { width:380px; height:223px; -moz-border-radius: 50px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } 

Como respuesta alternativa, siempre que el contenedor .picture-photo alrededor de la imagen (sin relleno visible), puede agregar el siguiente CSS para ocultar las esquinas que sobresalen del elemento secundario (la imagen):

 .picture-photo { overflow:hidden; }