Bug 24880 - image overflows the border when using border-radius
Summary: image overflows the border when using border-radius
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Linux
: P2 Minor
Assignee: Nobody
Depends on:
Reported: 2009-03-27 04:08 PDT by Pavol Rusnak
Modified: 2012-07-18 15:10 PDT (History)
5 users (show)

See Also:

testcase (16.90 KB, application/bzip2)
2009-03-27 04:08 PDT, Pavol Rusnak
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Pavol Rusnak 2009-03-27 04:08:07 PDT
The behaviour and the workaround is described here:

I'm attaching the testcase. Also I'm not sure if the behaviour is a bug or a
feature according to CSS 3 specification.
Comment 1 Pavol Rusnak 2009-03-27 04:08:32 PDT
Created attachment 29007 [details]
Comment 3 Dave Hyatt 2009-03-27 10:46:48 PDT
This was fixed recently.

Comment 4 Nathan Vander Wilt 2009-06-06 16:12:56 PDT
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).

<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">

<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">
<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.)
Comment 5 Chris Hills 2009-08-15 06:53:48 PDT
I would request that this bug be reopened also as the fix is incomplete due to the incorrect clipping.
Comment 6 Lea Verou 2011-03-09 16:03:44 PST
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)
Comment 7 j.j. 2012-07-18 15:10:58 PDT
> I would also request this to be reopened

I think this is coverd by bug 83206?