CODEWITHSUNDEEP
htmlcss
Maximus
Maximus

Reputation: 2976

Remove bottom border from parent div

I am trying to remove bottom border from parent div. I have written following HTML code but I think my approach is not right. See this image enter image description here

Here is my HTML code

<div class="my-label">
    <div style="border-bottom: 1px solid #ECECEC;">
        <div style="border: 1px solid #ECECEC; border-bottom: #fff; width: 100px; height: 30px; margin-left: 30px">

        </div>
    </div>
</div>

jsfiddle http://jsfiddle.net/Sp9Va/

Upvotes: 1

Views: 1279

Answers (4)

Oriol
Oriol

Reputation: 288120

Just add

margin-bottom: -1px;

in order to overlap borders.

You must also use border-bottom-color: #fff instead of border-bottom: #fff in order to keep the width and the style.

Demo

Upvotes: 0

Josh Powell
Josh Powell

Reputation: 6297

You can use a pseudo class to add a 1px line across the bottom of it.

Here is the new css:

.tab {
    border: 1px solid #ECECEC; 
    border-bottom: 0 solid white; 
    width: 100px; height: 30px; 
    margin-left: 30px; 
    padding: 10px;
    position: relative;
}

.tab:before {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
}

Finally, a fiddle: Demo

Upvotes: 4

Paul Roub
Paul Roub

Reputation: 36438

The border of the tab is inset into the container; it doesn't cover the container's border.

You can set a negative bottom margin to correct that:

.headerbar {
    border-bottom: 1px solid #ECECEC;
}

.headertab {
    border: 1px solid #ECECEC; 
    border-bottom: 1px solid #fff; 
    width: 100px; 
    height: 30px; 
    margin-left: 30px; 
    margin-bottom: -1px;
    padding: 10px
}

Example: http://jsfiddle.net/Sp9Va/4/

Upvotes: 1

George
George

Reputation: 36784

Position it relatively and nudge it down just 1px, so that it covers its parent's border:

position:relative;
top:1px;

JSFiddle

Upvotes: 2

Related Questions