77572 2012-02-01 12:50:29 -0800 content inside element with border-radius is not clipped to border-radius when overflow: hidden is set. 2022-07-27 10:30:23 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) PC Windows 7 RESOLVED CONFIGURATION CHANGED http://jsfiddle.net/CTS36/7/ P1 Major --- 1 ionut90ro webkit-unassigned 7raivis ahmad.saleem792 ap bfulgham bmcouto gabriel.schulhof idoros jaepark mrwolfgraphics rniwa robin.webkit shanestephens simon.fraser zalan oldest_to_newest 547301 0 ionut90ro 2012-02-01 12:50:29 -0800 Image is not cropped by the border-radius of the parent element. 552765 1 shanestephens 2012-02-08 19:31:36 -0800 http://www.w3.org/TR/css3-background/#corner-clipping "A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve." 584923 2 shanestephens 2012-03-21 20:25:45 -0700 *** Bug 81494 has been marked as a duplicate of this bug. *** 584939 3 shanestephens 2012-03-21 20:50:57 -0700 *** Bug 80162 has been marked as a duplicate of this bug. *** 587188 4 gabriel.schulhof 2012-03-24 15:35:49 -0700 <html> <head> <title>Clipping Bug</title> <style> .rounded-corners { position: relative; width: 120px; height: 80px; border: 10px solid black; border-radius: 30px; overflow: hidden; } .inner-box { position: absolute; width: 50px; height: 50px; background: red; left: -20px; top: -20px; } </style> </head> <body> <div class="rounded-corners"> <div class="inner-box"></div> </div> </body> </html> 587189 5 gabriel.schulhof 2012-03-24 15:36:16 -0700 The previous illustrates the bug. 587190 6 gabriel.schulhof 2012-03-24 15:38:25 -0700 My platform is Linux i386 running Google Chrome 17.0.963.83 ... 678924 7 7raivis 2012-07-25 23:43:36 -0700 Still not solved on Chrome 22.0.1217.0 canary. 721419 8 idoros 2012-09-15 04:05:40 -0700 same bug as #72619.. please fix it 1042363 9 bmcouto 2014-10-17 05:02:35 -0700 Still present on Safari for IOS8 and OS X 10.10 Yosemite. Please fix this ASAP 1887086 10 ahmad.saleem792 2022-07-27 09:51:23 -0700 I took test case from Comment 04 and changed it into JSFiddle below: Link - https://jsfiddle.net/seojxdn4/show I am not able to reproduce this bug in above test case and it renders same across all browsers (Safari 15.6, Chrome Canary 106 and Firefox Nightly 105 on macOS 12.5). Plus now image is cropped by border-radius - I have updated URL based JSfiddle to below: Link - https://jsfiddle.net/Lwrca4je/1/show It is working as intended across all browsers. I think this is fixed along the way and this can be marked as "RESOLVED CONFIGURATION CHANGED". Thanks!