如何在父元素的边框上扩展元素

Question

我有一些像这样的标签：

您可能会注意到，所选标签（第一个标签）由其父边框分隔。

如何让标签越过边框，使其与容器颜色相同（位于下方）？

第一个标签的CSS如下所示：

tab-active{
    float: left;
    background-image: url("../xyz.gif");
    background-repeat: no-repeat;
    background-position: center right;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    padding: 3px 8px;
    background-color: #D4DFFA;
}
tab {
    float: left;
}
tab_container {
    border-bottom: 1px solid #000000;
}

<div id="tab_container">
    <ul>
        <li class="tab-active">tab 1 selected</li>
        <li class="tab">tab 2 not selected</li>
    </ul>
</div>

标签和标签容器之间没有其他元素。

更新

红色区域是选定的标签。绿色区域是另一个未选中的选项卡。底部的浅蓝色是标签和内容之间的分隔符。底部的深蓝色是内容区域。

我想将红色区域连接到深蓝色区域，这样我就不会在它们之间有一个分隔符（父边框）。

Answer 1

在ul上，添加overflow:visible;

在标签li上，添加padding-bottom:10px;（或您想要的任何深度）

jsFiddle Demo