Add shadow to a border - html

Question

As you can see I've created a sideBar:
<div id="sideBar">
<button class="button">Home</button><br>
<button class="button">About Me</button><br>
<button class="button">Gallery</button><br>
<button class="button">Contact</button>
</div>
<div id="content">
<p>Content Div</p>
</div>
My css:
#sideBar {
background-color: grey;
width: 200px;
float: left;
height: 200px;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
}
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset -16px 0px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
}
#content p {
margin-left: 20px;
}
Fiddle:
http://jsfiddle.net/of4dcp2u/1/
I've used some inner shadow. The only problem is that I can't get the shadow work in de border lines. The white borders don't have any shadow.
I don't want to use any images for buttons. Is there a solution for this problem?

Answer 1

Sam, Put shadow to the content div like this
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
width: 200px;
}
#content {
background-color: white;
color: black;
float: left;
width: 200px;
border: 1px solid black;
height: 200px;
-webkit-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
box-shadow: -16px 0px 10px -8px rgba(0,0,0,0.75);
}

Answer 2

The box-shadow you have set to .button is going in the wrong direction. Use this code:
.button {
background-color: grey;
border-width: 0 0 2px 0;
border-color: white;
border-style: solid;
color: rgb(231, 231, 231);
cursor: pointer;
-webkit-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 16px 10px -8px rgba(0,0,0,0.75);
width: 200px;
}