Box-shadow is rounded on the corner with zero border-radius when some other corners have non-zero border-radius 
https://bugs.webkit.org/show_bug.cgi?id=91323
Summary Box-shadow is rounded on the corner with zero border-radius when some other c...
andreyvlktn
Reported 2012-07-14 05:20:45 PDT
When we have a block with a box-shadow on it: whenever one corner of this block has a border-radius added to it (other than 0), the other corners of box-shadow become rounded as well (with a different radius than any of the specified values for border-radius). For example, here we have block with all corners rounded, except top-right, and we can see that box-shadow on that corner is rounded: http://jsfiddle.net/3CRLk/14/show/ .
Attachments
Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2012-09-10 10:02:01 PDT
This is the way that 'spread' works. There was mailing list discussion about whether it should make sharp corners round.
Lea Verou
Comment 2 2012-09-10 10:20:18 PDT
Simon, the issue here is not about how spread works, it's about different behavior in different cases: It's rounded when other corners are rounded and square when no other corner is rounded. AFAIK, whether other corners are rounded or not should not affect the spread of a different corner (except in edge cases, and this is not one of them). If that isn't a bug, I'd appreciate a link to the relevant www-style discussion or Minutes. Thanks.
Simon Fraser (smfr)
Comment 3 2012-09-10 10:24:51 PDT
Sorry, I misunderstood.
Simon Fraser (smfr)
Comment 4 2012-09-10 10:25:00 PDT
This is why I hate spread :(
Ahmad Saleem
Comment 5 2022-11-27 12:43:48 PST
I am unable to reproduce the bug in Safari 16.1 using attached JSFiddle, all other browsers (Chrome Canary 110 and Firefox Nightly 109) match with Safari as well. I don't see any box shadow as round on top-right, it is same as other. Appreciate if someone else also can confirm. Thanks!
Note You need to log in before you can comment on or make changes to this bug.