CODEWITHSUNDEEP
htmlcss
user1825699
user1825699

Reputation:

Border radius is not working in Chrome & Safari Browser

I'm using border radius for my images, the corner of the images are not getting rounded.

But the same code was working properly in Mozila Firefox.

CSS :

 body img { 
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 3px solid #ed1d24;
    }

enter image description here

Upvotes: 2

Views: 1197

Answers (3)

Sparky
Sparky

Reputation: 98758

Use a wrapper div and apply border and border-radius to the #wrapper and only border-radius to the image inside. I reduced the border-radius on the image by the same exact amount as the border width of the wrapper in order to properly fill out the container with the image. If you make the border-radius the same on both elements, you'll see a slight gap in the corners because the of the minor difference in sizes caused by the border width.

HTML: 

<div id="wrapper">
   <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" width="620" height="388" alt="" /> 
</div>

CSS:

#wrapper {
    width: 620px; height: 388px;
    border: 2px solid #ed1d24;
    border-radius: 20px;
}    

#wrapper img { 
    border-radius: 18px; /* wrapper radius minus wrapper border width */
}​

DEMO tested in Safari:

http://jsfiddle.net/D7MHh/2/

Screenshot of jsFiddle in Safari:

Screenshot in Safari of jsFiddle

Upvotes: 0

MartinStettner
MartinStettner

Reputation: 29174

There must be an error somewhere else in your code, border-radius works perfectly fine in Google Chrome as GolezTrol has already shown, your CSS is also correct.

Try opening the developer tools and check, if the styles are properly applied to your img element.

Upvotes: 1

GolezTrol
GolezTrol

Reputation: 116200

set the border first, and then override its radius:

 body img { 
    border: 1px solid #ed1d24;
     border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    }

[edit]

Actually I can only conclude that it works one way or the other. I'm using Chrome myself and both images in this fiddle have rounded corners.

http://jsfiddle.net/aqBA7/

Upvotes: 1

Related Questions