CSS, angoli arrotondati non funzionanti

Ho due immagini una sopra l'altra:

inserisci la descrizione dell'immagine qui

Ecco il codice:

<div class="picture"> <span class="name"><br/><a href="profile.php">Pavadinimas</a></span> <div class="picture-content"> <div class="icons"> <div class="ico-info"><img src="images/product_mark_1.png" /> <span class="ico-info">Automatinis mechanizmas</span> </div> <div class="ico-info"><img class="ico-info" src="images/product_mark_2.png" /> <span class="ico-info">Miegamas mechanizmas</span> </div> <div class="ico-info"><img src="images/product_mark_3.png" /><br/> <span class="info">Spyruoklės</span> </div> </div> <div class="picture-grey"><img alt="" src="images/grey.png" /> </div> </div> <div class="picture-photo"><img alt="" src="images/pic.png" /> <div class="description1"> Ilgis/Plotis/Aukštis </div> <div class="description2"> Ilgis/Plotis </div> <div class="description3"> 300/300/300 </div> <div class="description4"> miegamoji dalis 100/100 </div> </div> </div> 

Voglio che l'image in alto sia con angoli arrotondati come questo:

inserisci la descrizione dell'immagine qui

Le mie lezioni di css sono:

 .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; } 

Ma sfortunatamente gli angoli arrotondati non funzionano affatto! Perchè no? C'è qualche problema che non conosco?

Questo è un vecchio problema con Firefox (e probabilmente anche altri browser); non ha ritagliato le immagini fino all'ultima versione di firefox:

Firefox -moz-border-radius non ritaglierà l'image?

Solo per curiosità, puoi provare quanto segue ?:

 .picture{ position:relative; width:462px; height:305px; margin:0px; padding:0px; background:url('http://i.stack.imgur.com/w0mOg.png') no-repeat; background-position:50% 50%; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; } <div class="picture"></div> 

Ho l'ultima versione di firefox quindi non posso controllare se funziona anche su versioni precedenti, ma avrebbe senso se lo facesse. Firefox è stato in grado di ritagliare le immersioni per un po 'di tempo.

vuoi la tua image rotonda! non DIV!

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

Come risposta alternativa, finché il contenitore .picture-photo avvolge attorno all'image (nessuna spaziatura visibile), è ansible aggiungere il seguente CSS per hide gli angoli che sporgono dall'elemento figlio (l'image):

 .picture-photo { overflow:hidden; }