CSS, rounded corners not working - php

Question

I have two pictures on top of each other:
Here is the code:
<div class="picture">
<span class="name"><br/>Pavadinimas</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>
I want the image at the top to be with rounded corners like this:
My css classes is:
.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;
}
But unfortunately rounded corners is not working at all! Why not? Is there some issue I don't know?

Answer 1

you want your image round! not DIV!
.picture-photo img {
width:380px;
height:223px;
-moz-border-radius: 50px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}

Answer 2

As an alternate answer, as long as the container .picture-photo wraps tight around the image (no visible padding), you can add the following CSS to hide the corners that are sticking out from the child element (the image):
.picture-photo {
overflow:hidden;
}

Answer 3

This is a old problem with firefox (and probably a few other browsers as well); it didn't crop the images until the latest firefox version:
Firefox -moz-border-radius won't crop out image?
Just out of curiosity, can you try the following?:
.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>
I have the latest version of firefox so I can't check if it works on older versions as well, but it would make sense if it did. Firefox has been able to crop divs for quite some time.