Css, Rounded Corners Not Working

I have two pictures on top of each other: Here is the code:

Pavadinimas

Solution 1:

you want your image round! not DIV!

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

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

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

Share