Question

could anyone tell me why, if i use border-radius: 10px it doesn’t round all the edges the same?

#portfolio1
{

    background-image:url("images/bg.png");
    background-repeat: none;

    height: 150px;

    width: 300px;
    float: left;
    margin-top:10px;
    margin-bottom:0px;
    margin-left:10px;
    margin-right:10px;  
    border-radius: 10px;
    /*border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;*/
    /*-webkit-border-radius: 20px;*/
}

Notice I’ve commented a few lines of css where I was trying different things. I seems that if I to the individual border values to different for left and right edges it looks okay but still has something wrong with it.

Also the same with the webkit one. I’m using chrome, did try it with firefox as well but got the same problem. Could it be to do with the margin values I’m using? also I have portfolio1, portfolio2 and portfolio3 which are all very similar, but when displayed on my webpage I’m using each of them twice….. If that makes a difference.

Thanks for the help.

Answer 1

If you wanted to make all the edges round at 10px then you don’t need to have it be so complicated (specifying topright,topleft,etc.)

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Here’s a very useful tool you can use.