Chandler Moisen

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:

box shadow with 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:

© 2013 - 2022
Built with Gatsby