Remove right side of box shadow

Question

I have found lots of posts similar to what I am asking and have been working away at this for hours and finally decided I should probably seek some exterior advice :).

I am trying to shadow 3 sides of an div using box-shadow I want the right side to be shadowless but cannot figure it out there are lots of posts on how to un-shadow the top but after countless efforts i could not even apply this.

Answer 1

Update:

clip-path is now (2020) supported in all major browsers.

---

Original Answer:

If you're willing to use experimental technology with only partial support, you could use the clip path property.

This will provide you with exactly the effect I believe you are after: a normal box shadow on the top, left and bottom edges and clean cut-off on the right edge. A lot of other SO solutions to this issue result in shadows that "dissipate" as they near the edge that is to have no shadow.

In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).

#container {     box-shadow: 0 0 5px rgba(0,0,0,0.8);     clip-path: inset(-5px 0px -5px -5px); } 

This will clip the div in question at:

• 5 pixels above the top edge (to include the shadow)
• 0 pixels from the right edge (to hide the shadow)
• 5 pixels below the bottom edge (to include the shadow)
• 5 pixels outside of the left edge (to include the shadow)

Note that no commas are required between pixel values.

The size of the div can be flexible.