Adding a glow to 3 sides using CSS - border

Question

I have a box which overlaps another to form a sort of L shape, I am trying to achieve a glow around the whole of the L shape which therefore requires a glow on only 3 sides of one of these boxes.
I've tried using the box-shadow property but can't seem to get it to only work for 3 of the sides, is this the correct method to use or is there another method using borders I could use to achieve a glow on the 3 sides?
Here is the code I've been trying to use
-moz-box-shadow: 0 -1px 5px #80abc6;
-webkit-box-shadow: 0 -1px 5px #80abc6;
box-shadow: 0 -1px 5px #80abc6;

Answer 1

You could use the clip property:
div {
width: 100px;
height: 30px;
margin: 30px;
clip: rect(-15px,115px,45px,0);
position: absolute;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
}
Demo: http://jsfiddle.net/QBQJn/

Answer 2

You can do it with css :after property. Like this:
div{
width:100px;
height:30px;
-moz-box-shadow: 0 -1px 15px #80abc6;
-webkit-box-shadow: 0 -1px 15px #80abc6;
box-shadow: 0 -1px 15px #80abc6;
margin:30px;
position:relative;
}
div:after{
content:'';
width:10px;
height:100%;
background:#fff;
position:absolute;
top:0;
left:-10px;
}
Check this http://jsfiddle.net/QBQJn/1/

Answer 3

Here's one way to do it: http://jsfiddle.net/thirtydot/Wec5h/
HTML:
<div id="l">
<div id="v"></div><div id="h"></div>
</div>
CSS:
#l {
padding: 20px;
border: 1px solid red;
float: left;
}
#v, #h {
-moz-box-shadow: 0 0 5px #80abc6;
-webkit-box-shadow: 0 0 5px #80abc6;
box-shadow: 0 0 5px #80abc6;
display: inline-block;
vertical-align: bottom;
position: relative;
}
#v {
width: 48px;
height: 192px;
}
#h {
width: 96px;
height: 48px;
}
#v:after {
content: '';
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 38px;
left: 0;
height: 20px;
background: #fff;
}
#h:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -10px;
width: 20px;
background: #fff;
}