Bug 24880

Summary: image overflows the border when using border-radius
Product: WebKit Reporter: Pavol Rusnak <stick>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Minor CC: bugzilla, chaz, lea, moz, natevw
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: PC   
OS: Linux   
Attachments:
Description Flags
testcase none

Description Pavol Rusnak 2009-03-27 04:08:07 PDT
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.
Comment 1 Pavol Rusnak 2009-03-27 04:08:32 PDT
Created attachment 29007 [details]
testcase
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).

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.)
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?