Inconsistent selectable area of elements with border-radius

Question

jsFiddle

HTML

Answer 1

A solution for this, might be to simple, is simply to set user-drag : none on the element.

Answer 2

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.