One pixel shadow on three sides using CSS3 box-shadow - css

Question

I need to create a one pixel shadow on three sides of an element using box shadow. I'm using the following code, except it's creating a two pixel border but I only need one.
-moz-box-shadow: 0 1px 1px #c00
-webkit-box-shadow: 0 0 1px 0 #c00
box-shadow: 0 0 1px 0 #c00

Answer 1

Try 3 shadows, no blur. http://jsfiddle.net/leaverou/8tgAp/1/
body {
width: 300px;
height: 200px;
margin: 20px auto;
-moz-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
-webkit-box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
box-shadow: 0 1px 0 #c00, 1px 1px 0 #c00, -1px 1px 0 #c00;
}

Answer 2

Using the normal border declaration is the way to go, but if—for whatever reason—you're unable to use border, then you can hide one side of the shadow with the :before or :after pseudo-selector.
Example:
body {background-color: #000; color: #fff}
.module {
height: 100px;
width: 100px;
background-color: #000;
-moz-box-shadow: 0 0 2px #f00;
-webkit-box-shadow: 0 0 2px #f00;
box-shadow: 0 0 2px #f00;
}
.module:before {
content: '';
border-top: solid #000 1px;
display: block;
position: relative;
top: -1px;
}
You can see it in action here: http://jsfiddle.net/3nspR/