One pixel shadow on three sides using CSS3 box-shadow

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/