How to Give Box Shadow a Border Radius
May 25, 2020
Today I learned how easy it is to apply a border radius to an element’s box shadow: just add
border-radius to the element!
Allan, my co-founder at Keming, had recently overhauled the design our sign-up form to include box shadow with a border radius:
Initially I thought that this would require modifying the
box-shadow value in some way, but, much to my surprise and delight, an element’s box shadow will respect and reflect its
border-radius with no additional work required.
You can see this in the following CodePen: