Remove right side of box shadow

Use :after pseudo element : http://jsfiddle.net/romiguelangel/YCh6F/

HTML

<ul>
    <li><a href="#">item</a></li>
    <li class="hello"><a href="#">item with after element</a></li>
</ul>

CSS

li {
    display: block;
    position: relative;
    -webkit-box-shadow: 0 0 2px 1px gray
}

.hello:after{
    display: block;
    background-color: #f3f5f6;
    width: 20px;
    height: 38px;
    content: " ";
    position: absolute;
    top: 0;
    right: -10px
}

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.

I think you have 2 options:

1) Set your shadow's horizontal alignment to the left (negative values).

box-shadow: -30px 0px 10px 10px #888888;

Although this way you won't have the same shadow size in the top and bottom.

2) Use a div inside a div and apply shadow to each one.

.div1
{
    box-shadow: -30px 10px 20px 10px #888888;
}
.div2
{
    box-shadow: -30px -10px 20px 10px #888888;
}

Then you'll have to ajust the size for the one you want.

Here, have a jsfiddle: http://jsfiddle.net/EwgKF/19/