How to lay bottom border of button (white) over bottom border of containing div

I'm trying to make a tab thing out of buttons. So the selected button gets its' class changed so the bottom border is now WHITE.

The effect is to make it look like part of the connecting page.

HOWEVER, when I add margin-bottom:-2px; to the class - HOPING TO COVER THE PORTION OF MY DIV BORDER - it still shows the div border.

IF I make it -3px, then I get the WHITE background over the div... BUT now I have 1 pixel of left and right border sticking underneath the bottom... overflow:hidden doesnt work because it sets me back to the DIV border showing...

Anyone run into this problem before?

Thanks! Todd

HERE IS THE -2px - Notice, BLUE BORDER STILL SHOWING:

AND here is what happens if give it -3px ... NOW blue side borders sticking through (ugh!)

HERE IS HTML:

  <div style="border-bottom:1px solid #A3C0E8; width:556px;">
        <asp:Button Text="Settings" ID="btnViewSettings" runat="server" class="dxpButton_AquaTab"  Visible="false" CausesValidation="false" CommandArgument="0" OnClick="SwitchView" />
        <asp:Button Text="Links" ID="btnViewLinks" runat="server" Visible="false" class="dxpButton_AquaTab"  CausesValidation="false" CommandArgument="1" OnClick="SwitchView"/>
        <asp:Button Text="Test Data Source" ID="btnTestLoader" runat="server" class="dxpButton_AquaTab" CausesValidation="false" Visi开发者_如何转开发ble="false" CommandArgument="2" OnClick="btnLoaderTest_click"/>
        <asp:Button Text="Test Import" ID="btnTestConverter" runat="server" class="dxpButton_AquaTab"  CausesValidation="false" Visible="false" CommandArgument="2" OnClick="btnConverterTest_click"/>
        <asp:Button Text="Run Import" ID="btnRunImport" runat="server" class="dxpButton_AquaTab"  CausesValidation="false" Visible="false" CommandArgument="2" OnClick="btnRunImport_click"/>
    </div>

HERE IS JQUERY:

 if ($('#dgLinkGrid').is(':visible')) {
        $('#btnViewLinks').removeClass("dxpButton_AquaTab");
        $('#btnViewLinks').addClass("dxpButton_AquaTabSelected");
    };

HERE IS MY CSS:

  .dxpButton_AquaTab  {
    background:url("App_Themes/Aqua/Editors/edtButtonBack.gif") repeat-x scroll center top #E2F0FF;
    border:1px solid #A3C0E8;
    color:#2C4D79;
    cursor:pointer;
    font-family:Tahoma;
    font-size:9pt;
    font-weight:normal;
    padding:1px;
    vertical-align:middle;
    width:103px;
    height:40px;
    margin-left:3px;
    margin-bottom:-1px;
    }

.dxpButton_AquaTabSelected 
{
    background-color:White;
    border:1px solid #A3C0E8;
    color:#2C4D79;
    cursor:pointer;
    font-family:Tahoma;
    font-size:9pt;
    font-weight:normal;
    padding:1px;
    vertical-align:middle;
    width:103px;
    height:40px;
    margin-left:3px;
    margin-bottom:-3px;
    z-index:100;
    border-bottom:0px solid white;
    border-top:3px solid #FFBD69;
}

---

I put together a somewhat sloppy jsFiddle to demonstrate:

Make sure to hover the links to see it in action.

http://jsfiddle.net/Madmartigan/xb6mY/

Basically, you combine your negative margin trick with position:relative (to get z-index to work) and some extra bottom padding on the anchor. Apply the border to the wrapper (list item) and not to the anchor. I assumed you wanted the tab to stay in place and not sink down.

Sorry for the poor explanation, but I think maybe the jsfiddle can do a better job of explaining than I can at the moment, GL!