CSS3 box-shadow, all sides but one?

Question

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?

Answer 1

If you added two spans to hook onto then you could use two, something like:

box-shadow: -1px -1px 1px #000;

on one span and

box-shadow: 1px -1px 1px #000;

on another. Might work!

If the shadows overlap you could even use 3 shadows - one 1px to the left, one 1px to the right and one 1px up, or however thick you want them.

Answer 2

Cut it off with overflow.

<style type="text/css">
    div div {-webkit-box-shadow:0 0 5px #000; height:20px}
    div {overflow:hidden;height:25px; padding:5px 5px 0 5px}

</style>
<div><div>tab</div></div>