Opera, border-radius and overflow:hidden

Question

I have the following problem: jsfiddle.

As you can see from the example, Opera (ver. 12.16) doesn't clip the borders of the image that is positioned inside a div. It returns a div with rounded corners, but fails to hide overflowed image corners. In other browsers no such problem persists. My code:

<div style="overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black;">
    <img src="http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg" style=" width:200px; height:200px; ">
</div>

Is there a way to solve this?

Answer 1

It's a bug and it's not possible in Opera 12.16 and lower to wrap the corners of the image inside the wrapper div.

It can be solved by giving the parent(wrapper) div relative positioning, appending the image as a background image and positioning it using its top and left coordinates.

If the image is big it should be resized using its background-size property.

Here is the updated jsfiddle link: jsfiddle

<div style="position:relative; overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black; background-image:url(http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg); background-size:200px 200px;"></div>

Answer 2

Yes. Upgrade to Opera 17, which is based on Google Chromium, eg. the same as Chrome. This should make rendering be similar to Chrome and other browsers.

Answer 3

If it's appropriate add border-radius directly inside to <img> tag style.