Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Php

CSS, Rounded Corners Not Working

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

Pavadinimas

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

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.


You may like these posts

Post a Comment for "CSS, Rounded Corners Not Working"