May 26, 2011
Absolute positioned image in border radius wrapper
Question by Johan Wallberg
I have a wrapper with border radius. Inside the wrapper I have a absolute positioned image in the top right corner. My problem is that the image doesn’t crop/hide under the wrapper with border radius. I’ve tried overflow:hidden on the wrapper but it doesn’t work. See image below.
Answer by Starx
Image tag is not affected by border-radius.
Your best bet is to use the picture as a background like:
<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>
The element(in above example a div) should contain the size of the actual image), and unless you use CSS3, the image cannot be resized like <img> tag
