RESOLVED DUPLICATE of bug 295213295646
box-shadow is not clipped by border-radius in Safari
https://bugs.webkit.org/show_bug.cgi?id=295646
Summary box-shadow is not clipped by border-radius in Safari
info
Reported 2025-07-09 10:56:50 PDT
In Safari (including Safari 26 beta and Safari Technology Preview), box-shadow is not visually clipped when applied to an element with border-radius, even when the element has overflow: hidden. This causes shadows to appear rectangular rather than following the rounded shape of the element. Example on Official Tailwind Website: https://tailwindcss.com/plus/ui-blocks (see buttons)
Attachments
View Safari 26 (13.01 KB, image/png)
2025-07-10 13:46 PDT, info
no flags
View Chrome (Expected behaviour) (14.00 KB, image/png)
2025-07-10 13:47 PDT, info
no flags
Ahmad Saleem
Comment 1 2025-07-09 17:36:03 PDT
*** Safari 18.5 *** Does not reproduce (looking at 'Documentation' button) *** Safari Technology Preview 223 *** Broken *** Chrome Canary 140.0.7281.0 (Official Build) canary (arm64) *** Does not reproduce (looking at 'Documentation' button) *** Firefox Nightly 142 (20250709093153) *** Does not reproduce (looking at 'Documentation' button)
Ahmad Saleem
Comment 2 2025-07-10 04:48:18 PDT
Fixed on WebKit ToT (297198@main) (Minibrowser). @Simon - I think you might have already fixed it on ToT.
info
Comment 3 2025-07-10 13:46:36 PDT
Created attachment 475868 [details] View Safari 26 This is how it looks in Safari
info
Comment 4 2025-07-10 13:47:27 PDT
Created attachment 475869 [details] View Chrome (Expected behaviour) This is the Expected behaviour and behaviour before 26
Simon Fraser (smfr)
Comment 5 2025-07-10 14:13:47 PDT
This was fixed via bug 295213. *** This bug has been marked as a duplicate of bug 295213 ***
Note You need to log in before you can comment on or make changes to this bug.