feature detect incorrect overflow with border-radius

Question

As we know does overflow: hidden in combination with border-radius not work in all browser as it should — namely Safari and Opera have problems cutting the rounded corners off contained images.

Example HTML:

<a class="circle" href="#">
    <img src="http://placekitten.com/300/300" alt="kitten" />
</a>

and corresponding CSS:

.circle {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    height: 120px;
    overflow: hidden;
    width: 120px;
}

check this jsfiddle

I do have a fall-back for Safari and Opera using background-images, but I only want to use it in case overflow isn't working well. Now, I don't want to simply use browser detection for known reasons, but I want to feature detect the ability to cut off the corners the right way. Normally I would check like this:

if('overflow' in document.body.style){
    // overflow
} else {
    // no overflow
}

But this will not help this time... So, is there any way to check it correctly?

Answer 1

Why not css hacks?

@media screen and (-webkit-min-device-pixel-ratio:0) {

}

I believe this will target safari and opera.

Yes, chrome is webkit too. No, it wont be affected.

souce: http://css-tricks.com/is-there-any-dedicated-css-hacks-for-safari-or-opera/

Opera also has vendor css selector which is safer imo:

x:-o-prefocus {
}