remove top border

I have two DIVs one contain new release and must, another one contain whole data. both div have a red border. I remove bottom border of first div.

I want to remove the border 开发者_如何学Gowhere I marked with red rectangle:

Have your active tab have position:relative and z-index higher then the content box. Then add border-bottom: 1px solid white and give it margin-bottom: -1px.

From a current project: http://jsfiddle.net/aVZLH/1/

Maybe you have some additional work for IE. But rudimentary it should show you a way to solve your problem... Without additioanl markup in your document.

<ul>
    <li class="current">Tab #1</li>
    <li>Tab #2</li>
</ul>
<div class="content">
    <p>MY AWESOME CONTENT</p>
</div>

/*CSS*/
ul {
    overflow: hidden;
    position: relative;
    top: 1px;
    z-index: 2;
}

li {
    color:#fff;
    background:red;
    float:left;
    border:1px solid red;
    padding:5px 10px;
    position:relative;
    top:1px;
}

.current {
    background: #FFFFFF;
    border-bottom: 0;
    color: red;
}

.content {
    padding:20px;
    border:1px solid red;
    position:relative;
    z-index:1;
}

You can create another div to occupy the space to the right of the "Must" tab. Set this div's bottom border to "1px solid red". Then, remove the border-top from the news box, and the border-bottom from the tabs themselves.