Bug 30475

Summary: Image is not clipped by border-radius
Product: WebKit Reporter: Nathan Vander Wilt <natevw>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ivan.enderlin, lea, moz, natevw, peter, rick2910, simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: OS X 10.6   
Attachments:
Description Flags
Shows ugliness when border is added to border-radius image none

Nathan Vander Wilt
Reported 2009-10-16 21:01:04 PDT
Created attachment 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.)
Attachments
Shows ugliness when border is added to border-radius image (691 bytes, text/html)
2009-10-16 21:01 PDT, Nathan Vander Wilt 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Lea Verou
Comment 1 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.
Rick van de Westelaken
Comment 2 2011-09-09 07:27:46 PDT
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
j.j.
Comment 3 2012-07-18 15:09:31 PDT
Duplicate of bug 83206?
Ahmad Saleem
Comment 4 2022-09-24 09:46:36 PDT
I am not able to reproduce this bug in Safari 16 and all other browsers (Chrome Canary 108 and Firefox Nightly 107) render this same as well. In case if I am wrong, please reopen but I am marking this as "RESOLVED CONFIGURATION CHANGED". Thanks! JSFiddle Link (with HTTP updated to HTTPS) - https://jsfiddle.net/zL1gnsqe/show
Note You need to log in before you can comment on or make changes to this bug.