CSS, rounded corners not working

Question

I have two pictures on top of each other:

Here is the code:

<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>

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

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('https://i.sstatic.net/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.

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

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