5

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
dayuloli
  • 16,205
  • 16
  • 71
  • 126
  • Please see that: http://stick.gk2.sk/2009/03/image-with-rounded-corners-using-css3/ – GabrielSNM Mar 17 '15 at 14:30
  • @GabrielSNM Thank you for the link. However my question isn't so much how to resolve this, it is more of a question of design of this behaviour. – dayuloli Mar 17 '15 at 14:31
  • 2
    Don't make us visit other questions, and go to other sites to understand what you're asking. Put everything you need into your question. – j08691 Mar 17 '15 at 14:31
  • 1
    I first though it was the same for all [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element) but it isn't the case https://jsfiddle.net/webtiki/jp81fp3u/5/ – web-tiki Mar 17 '15 at 14:38
  • 2
    An `alert()` on click will show that the behavior that you describe happens on Chrome, but not IE or Firefox: https://jsfiddle.net/2zgw54dg/1/. This may be a bug in Chrome, and not a problem with `border-radius` – Alvaro Montoro Mar 17 '15 at 14:50
  • 1
    I tried the last fiddle in IE and FF : in FF I experienced "the bug" on the `textarea` and `input` and in IE only on `input` – web-tiki Mar 17 '15 at 14:54
  • 1
    Changed title to avoid mismatch with other questions in search results. Please revert if this is not very accurate... – Vishwanath Mar 17 '15 at 14:56
  • In a deleted comment/answer @Stuff_H4pp3nz referred to [this post](https://css-tricks.com/border-radius-on-images/), which suggests that image is considered 'content', and `border-radius` is only applied on 'containers, thus `border-radius` will not 'work' on images. – dayuloli Mar 17 '15 at 15:10

2 Answers2

4

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

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

Leo
  • 51
  • 5
  • This doesn't seem to work on Chrome. When added `user-drag:none` to the CSS, the non-visible area of the pic is still clickable: https://jsfiddle.net/2zgw54dg/3/ – Alvaro Montoro Mar 18 '15 at 14:30