Simple CSS tabs - need to break border on active tab

Question

I want to create a very simple tab style that looks like this:

  _____   _____   _____
_|_____|_|     |_|_____|______________

So basically there is a horizontal border on the bounding box that breaks for the active tab. I'm using a basic list, with the following CSS, but the outer border always appears over the individual tabs. I've tried various positioning and z-index as well to no avail.

ul.tabHolder {
    overflow: hidden;
    clear: both;
    margin: 1em 0;
    padding: 0;
    border-bottom: 1px solid #666;
}
ul.tabHolder li {
    list-style: none;
    float: left;
    margin: 0 3px -1px; /* -1 margin to move tab down 1px */
    padding: 3px 8px;
    background-color: #444;
    border: 1px solid #666;
    font-size: 15px;
}
ul.tabHolder li.active {
    background-color: #944;
    border-bottom: 1px solid #944;
}

Answer 1

http://css.maxdesign.com.au/listamatic/horizontal05.htm

Answer 2

Changing your existing code as little as possible - try display: inline-block for the li tags, with the border on a .menu container div:

.menu {
    border-bottom: 1px solid #666;
}
ul.tabHolder {
    overflow: hidden;
    margin: 1em 0 -2px;
    padding: 0;
}
ul.tabHolder li {
    list-style: none;
    display: inline-block;
    margin: 0 3px;
    padding: 3px 8px 0;
    background-color: #444;
    border: 1px solid #666;
    font-size: 15px;
}
ul.tabHolder li.active {
    background-color: #944;
    border-bottom-color: #944;
}

HTML used to illustrate (added div at bottom to show blending of active tab into div colour):

<div class="menu">
    <ul class="tabHolder">
        <li>Menu 1</li>
        <li class="active">Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>
<div style="background-color: #944; height: 1em">