Search code examples
bordercssglow

Adding a glow to 3 sides using CSS

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;
Solution

  • 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/