How to Give Box Shadow a Border Radius

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: