Reputation:
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;
}
Upvotes: 2
Views: 1197
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 */
}
Screenshot of jsFiddle in Safari:
Upvotes: 0
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
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.
Upvotes: 1