RESOLVED CONFIGURATION CHANGED 77572
content inside element with border-radius is not clipped to border-radius when overflow: hidden is set. 
https://bugs.webkit.org/show_bug.cgi?id=77572
Summary content inside element with border-radius is not clipped to border-radius whe...
Dan Ionut Dumitriu
Reported 2012-02-01 12:50:29 PST
Image is not cropped by the border-radius of the parent element.
Attachments
Add attachment proposed patch, testcase, etc.
Shane Stephens
Comment 1 2012-02-08 19:31:36 PST
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."
Shane Stephens
Comment 2 2012-03-21 20:25:45 PDT
*** Bug 81494 has been marked as a duplicate of this bug. ***
Shane Stephens
Comment 3 2012-03-21 20:50:57 PDT
*** Bug 80162 has been marked as a duplicate of this bug. ***
Gabriel Schulhof
Comment 4 2012-03-24 15:35:49 PDT
<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>
Gabriel Schulhof
Comment 5 2012-03-24 15:36:16 PDT
The previous illustrates the bug.
Gabriel Schulhof
Comment 6 2012-03-24 15:38:25 PDT
My platform is Linux i386 running Google Chrome 17.0.963.83 ...
Binyamin
Comment 7 2012-07-25 23:43:36 PDT
Still not solved on Chrome 22.0.1217.0 canary.
Ido Rosenthal
Comment 8 2012-09-15 04:05:40 PDT
same bug as #72619.. please fix it
Bruno Couto
Comment 9 2014-10-17 05:02:35 PDT
Still present on Safari for IOS8 and OS X 10.10 Yosemite. Please fix this ASAP
Ahmad Saleem
Comment 10 2022-07-27 09:51:23 PDT
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!
Note You need to log in before you can comment on or make changes to this bug.