How to Add a Box-Shadow on One Side of an Element

How can I add a box-shadow on one side of an element?

Yes, you can use the shadow spread property of the box-shadow rule:

.myDiv{  border: 1px solid #333;  width: 100px;  height: 100px;  box-shadow: 10px 0 5px -2px #888;}

<div class="myDiv"></div>

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/

How to create a drop shadow only on one side of an element?

UPDATE 4

Same as update 3 but with modern css (=fewer rules) so that no special positioning on the pseudo element is required.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

Box-Shadow on the left side of the element only

You probably need more blur and a little less spread.

box-shadow: -10px 0px 10px 1px #aaaaaa;

Try messing around with the box shadow generator here http://css3generator.com/ until you get your desired effect.

Adding a box-shadow blur to only one side of an element

You could use an after element and stretch it a little:

#bg {  text-align: center;  width: 200px;  height: 200px;  padding: 50px;  background: #eeeeee;}
#box:after {  content:'';  display:block;   position:absolute;  z-index:0;  top:0;  left:-4px;  right:-4px;  bottom:0;  box-shadow: 0px 5px 5px -5px #000000;}
#box {  width: 100%;  height: 100%;  position:relative;  background: yellow;}

<div id="bg">  <div id="box"></div></div>

Creating a CSS3 box-shadow on all sides but one

In your sample create a div inside #content with this style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

and change #content style (remove paddings) and add shadow

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

add shadows to tabs:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}