Border-radius Safari

Question

I am making a banner where people can upload an image.

Before the upload it you see the image. With just a standard html code

<div id="box"><img src="blah blah" /></div>

The CSS :

div {
    width:370px;
    height:204px;
    position:relative;
    overflow:hidden;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

The image will fit in the div id="box" succesfull. If you can see i use border-top-left-radius and right-radius: That works perfect in firefox and Chrome. But in safari it doesnt work.

Example :
This is Chrome and Firefox . You can see the image will fit with the screen and got a nice border-radius on the top.

This is Safari . You see that the image dont have a border-radius on the top. I dont know the problem.

For that i also tried to use:

-webkit-

But that also didnt work. Anybody know how to fix that for safari?

Answer 1

please Update Below css and Check .....And make necessary changes as per your requirmnet..

hope this will solve your problem

div {
    width:370px;
    height:204px;
    position:relative;
    overflow:hidden;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
}

Please Mark answer if your problem is solved...

Answer 2

This is all you need:

div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-radius: 7px 7px 0 0;
}

Keep it simple. :-)