[Webkit-unassigned] [Bug 24880] image overflows the border when using border-radius

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=24880





------- Comment #4 from natevw at yahoo.com  2009-06-06 16:12 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.)


-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.