Bug 30475 - Image is not clipped by border-radius
: Image is not clipped by border-radius
: WebKit
Layout and Rendering
: 528+ (Nightly build)
: All Mac OS X 10.6
: P2 Normal
Assigned To:
  Show dependency treegraph
Reported: 2009-10-16 21:01 PST by
Modified: 2012-09-07 00:34 PST (History)

Shows ugliness when border is added to border-radius image (691 bytes, text/html)
2009-10-16 21:01 PST, Nathan Vander Wilt
no flags Details


You need to log in before you can comment on or make changes to this bug.

Description From 2009-10-16 21:01:04 PST
Created an attachment (id=41351) [details]
Shows ugliness when border is added to border-radius image

Image corner rounding in Safari 4.0.3 is still wrong. This is related to https://bugs.webkit.org/show_bug.cgi?id=24880, which has two requests (mine and another) to be reopened. Maybe a new bug is more appropriate:

While an image without a border now rounds nicely, if I add a border things get
icky. The image is getting clipped to the outside of the border, rather than
the inside. This means either the image still has square corners showing (if
the border is thicker than the radius) or the border gets drawn over by the
image (if the border is thinner than the radius).

I'd expect the image edge to always follow the inside of the border, as the
workaround in the OP's link shows. (Caveat: I'm not a CSS guru, so maybe the
standard requires clipping to the outside edge of the border. I sure hope not,
as this is terribly ugly.)
------- Comment #1 From 2011-03-09 16:10:40 PST -------
This bug still hasn't been fixed. I would suggest its title to be changed to "Replaced content gets clipped according to border box".

The spec clearly dictates that replaced content should be clipped according to the content box: "The content of replaced elements is always trimmed to the content edge curve." (http://www.w3.org/TR/css3-background/#corner-clipping)

IE9 and Firefox 4 both get this right.
------- Comment #2 From 2011-09-09 07:27:46 PST -------
I can confirm this issue, which Opera 11.51 is also rendering wrong. See http://rivierenlandzakelijk.nl/ (border around the map) for an example.

Chrome: 15.0.874.6 Canary build
------- Comment #3 From 2012-07-18 15:09:31 PST -------
Duplicate of bug 83206?