Can CSS3 box-shadow:inset do only one or two sides? like border-top?

Question

I\'m wondering about the support for side specific inner shadows in css3.

I know this works great on supported browsers.

div { box-shadow:inset 0px 1px 5         


        

Answer 1

I just had this problem myself. The solution that I found was with multiple box-shadows (one for each side that you want your shadow). Here is the definition:

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

Here is how to think it:

• first, make the spread 0 (this will disable the effect on all sides)
• the h-offset (if you set it to be positive, it will cast on the left side, if you set it negative, on the right side)
• the v-offset (if you set it to be positive, it will cast on the top side, if you set it negative, on the bottom side

Here you can see my case with box-shadow on three sides (left, top, right and the bottom is with same color as the background to create the effect that I wanted - the left side and the right go all the way to the bottom) https://codepen.io/cponofrei/pen/eMMyQX