Bug 24880 – image overflows the border when using border-radius

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Pavol Rusnak]

The behaviour and the workaround is described here:
http://stick.gk2.sk/blog/2009/03/image-with-rounded-corners-using-css3/

I'm attaching the testcase. Also I'm not sure if the behaviour is a bug or a
feature according to CSS 3 specification.

[Pavol Rusnak]

Created attachment 29007 [details]
testcase

[Pavol Rusnak]

issue also reported here:
https://bugzilla.mozilla.org/show_bug.cgi?id=485501
https://bugs.kde.org/show_bug.cgi?id=188242

[Dave Hyatt]

This was fixed recently.

[Nathan Vander Wilt]

Can this be reopened?

I'm testing image corner rounding in last night's nightly and noticed that 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).

Compare:
<img style="-webkit-border-radius:10px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/200px-Solid_green.svg.png">
- and -
<img style="-webkit-border-radius:50px; border: 5px solid black" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/200px-Solid_green.svg.png">

To:
<img style="-webkit-border-radius:10px; border: 5px solid black" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/200px-Solid_green.svg.png">
-and-
<img style="-webkit-border-radius:50px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Solid_green.svg/200px-Solid_green.svg.png">

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, though I hope not as this is terribly ugly.)

[Chris Hills]

I would request that this bug be reopened also as the fix is incomplete due to the incorrect clipping.

[Lea Verou]

I would also request this to be reopened. It appears that even though Webkit now clips the image according to border-radius, it clips it to the border box and not the content box, as the spec dictates: "The content of replaced elements is always trimmed to the content edge curve." (http://www.w3.org/TR/css3-background/#corner-clipping)

[j.j.]

> I would also request this to be reopened

I think this is coverd by bug 83206?