box shadow to left and right doesn't work - css

Question

I want to make box-shadow to the left and right sides,however there is alway a shadow in the top of the box,I have checked my code many times.
#box {
margin: 0 auto;
margin-top: 0px;
border: 1px solid #ffffff;
border-top-color: #e99f2e;
overflow: hidden;
box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f;
}
<div id="box"></div>

Answer 1

First understand the syntax of box-shadow and then it get's easy to apply box-shadow at any side as you have planned your design,
syntax -
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color
#box {
margin: 0 auto;
margin-top: 0px;
overflow: hidden;
box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f;
height: 150px;
width: 50%;
background:#cff;
margin-top:20px;
}
<div id="box"></div>

Answer 2

There is a hack actually.
You can achieve this by adding an "empty" top and bottom shadow.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);

Answer 3

I don't think this is as good as the other answers, but this is an alternative approach using absolute positioned pseudo elements with shadows.
.lr-shadow {
background:#fff;
border: 1px solid #fff;
border-top-color: #e99f2e;
width:100%;
max-width:500px;
height:200px;
position:relative;
margin:0 auto;
}
.lr-shadow:before, .lr-shadow:after {
box-shadow: 0 0 20px 2px #7f7e7f;
content:" ";
position:absolute;
top:50%;
transform:translateY(-50%);
height:90%;
z-index:-1;
}
.lr-shadow:before {
left:5px;
}
.lr-shadow:after {
right:5px;
}
<div class="lr-shadow"></div>

Answer 4

You can achieve this effect if you set the spread to the negative of blur parameter. For the left box shadow, set position to negative blur and the right box shadow, position to positive blur. I used 20px in this demo:
#box {
margin: 0 auto;
margin-top: 40px;
border: 1px solid #ffffff;
border-top-color: #e99f2e;
overflow: hidden;
width: 150px;
height: 150px;
box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f;
}
<div id="box"></div>
Check out this CSS Box-shadow generator to explore further.