30475 2009-10-16 21:01:04 -0700 Image is not clipped by border-radius 2022-09-24 09:46:36 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) All OS X 10.6 RESOLVED CONFIGURATION CHANGED P2 Normal --- 0 natevw webkit-unassigned ahmad.saleem792 ivan.enderlin lea moz natevw peter rick2910 simon.fraser oldest_to_newest 155360 0 41351 natevw 2009-10-16 21:01:04 -0700 Created attachment 41351 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.) 364861 1 lea 2011-03-09 16:10:40 -0800 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. 464777 2 rick2910 2011-09-09 07:27:46 -0700 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 672817 3 moz 2012-07-18 15:09:31 -0700 Duplicate of bug 83206? 1900898 4 ahmad.saleem792 2022-09-24 09:46:36 -0700 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 41351 2009-10-16 21:01:04 -0700 2009-10-16 21:01:04 -0700 Shows ugliness when border is added to border-radius image test.html text/html 691 natevw PGh0bWw+Cjxib2R5Pgo8ZGl2Pgo8aW1nIHN0eWxlPSItd2Via2l0LWJvcmRlci1yYWRpdXM6MTBw eDsiCnNyYz0iaHR0cDovL3VwbG9hZC53aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zL3Ro dW1iLzIvMjkvU29saWRfZ3JlZW4uc3ZnLzIwMHB4LVNvbGlkX2dyZWVuLnN2Zy5wbmciPgo8aW1n IHN0eWxlPSItd2Via2l0LWJvcmRlci1yYWRpdXM6NTBweDsiCnNyYz0iaHR0cDovL3VwbG9hZC53 aWtpbWVkaWEub3JnL3dpa2lwZWRpYS9jb21tb25zL3RodW1iLzIvMjkvU29saWRfZ3JlZW4uc3Zn LzIwMHB4LVNvbGlkX2dyZWVuLnN2Zy5wbmciPgo8L2Rpdj4KPGRpdj4KPGltZyBzdHlsZT0iLXdl YmtpdC1ib3JkZXItcmFkaXVzOjEwcHg7IGJvcmRlcjogNXB4IHNvbGlkIGJsYWNrIgpzcmM9Imh0 dHA6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi8yLzI5L1Nv bGlkX2dyZWVuLnN2Zy8yMDBweC1Tb2xpZF9ncmVlbi5zdmcucG5nIj4KPGltZyBzdHlsZT0iLXdl YmtpdC1ib3JkZXItcmFkaXVzOjUwcHg7IGJvcmRlcjogNXB4IHNvbGlkIGJsYWNrIgpzcmM9Imh0 dHA6Ly91cGxvYWQud2lraW1lZGlhLm9yZy93aWtpcGVkaWEvY29tbW9ucy90aHVtYi8yLzI5L1Nv bGlkX2dyZWVuLnN2Zy8yMDBweC1Tb2xpZF9ncmVlbi5zdmcucG5nIj4KPC9kaXY+CjwvYm9keT4K PC9odG1sPg==