How to get box-shadow on left & right sides only

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

You can get close with multiple box-shadows; one for each side

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

I wasn't satisfied with the rounded top and bottom to the shadow present in Deefour's solution so created my own.

inset box-shadow creates a nice uniform shadow with the top and bottom cut off.

To use this effect on the sides of your element, create two pseudo elements :before and :after positioned absolutely on the sides of the original element.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

Edit

Depending on your design, you may be able to use clip-path, as shown in @Luke's answer. However, note that in many cases this still results in the shadow tapering off at the top and bottom as you can see in this example:

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div></div>