Creating a CSS3 box-shadow on all sides but one

Issue

I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal line) going up, shading the bottom of all tabs except for the open one.

I'm going to use CSS3's box-shadow property to do it, but I can't figure out a way to shade only the parts I want.

Normally I'd cover up the bottom shadow of the open tab with the content area (higher z-index), but in this case the content area itself has a shadow so that would just wind up covering the tab.

Tab layout

     _______    _______    _______
    |       |  |       |  |       |
____|_______|__|       |__|_______|______

Shadow line.

Shadow would go up from the horizontal lines, and outward of the vertical lines.

                _______
               |       |
_______________|       |_________________

Here is a live example:

Any help out there, geniuses?

Solution

In your sample create a div inside #content with this style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

and change #content style (remove paddings) and add shadow

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

add shadows to tabs:

#nav li a {
    margin-left: 20px;
    padding: .7em .5em .5em .5em;
    font-size: 1.3em;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    position: relative;
    box-shadow: 0 0 8px 2px #888; /* the shadow */
}

Answered By - Peter