Inconsistent selectable area of elements with border-radius

Question

jsFiddle

HTML

<div></div>
<img src="http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg">

CSS

body {
    background-color: blue;
}

div {
    background-image: url(http://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg);
    background-size: cover;
}
div, img {
    width: 100px;
    height:100px;
    border-radius: 50%;
}

---

img

When border-radius is applied on an image, the areas that got rounded off can still be clicked on. If you click on and drag the area just outside the circle, you will see it's possible.

div

However, when you apply border-radius to a div, the rounded off areas are not part of the div and it is truly a circle.

---

It appears this applies not only to img but to object and video too (thanks to web-tiki's comment). Why does border-radius not apply to these elements? Is there a standard which specifies which is the correct behaviour?

Answer 1

Why does border-radius not apply to these elements?

WebKit-based browsers are known to have issues surrounding border-radius and replaced elements such as img, object and video elements. It's not clear to me why it doesn't happen with certain other replaced elements such as form elements, but replaced elements are generally a sticking point with most browsers.

Historically, some browsers failed to clip the content visually, as though border-radius had absolutely no effect. It seems that recent versions of WebKit/Blink rectify this, but not completely.

Is there a standard which specifies which is the correct behaviour?

The correct behavior is that replaced content should be clipped by border-radius, and that any pointer events on the clipped area must not be handled by the content that is clipped. The first two paragraphs of section 5.3 of Backgrounds & Borders state this very explicitly.

If Chris Coyier is correct in his claim that the replaced content is ignoring the clipping because it's the container being clipped and not the content (which is actually the expected behavior for non-replaced elements with overflow: visible), then that is a spec violation and can therefore be considered a bug.