CODEWITHSUNDEEP
css
Majoris
Majoris

Reputation: 3189

CSS - Cut or merge shared border between divs

How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders. I tried overlaying top div on the bottom. But Not getting what I want.

 .ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;

  }

    .ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;

  }


<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>

From - enter image description here

To -

enter image description here

Upvotes: 2

Views: 4048

Answers (2)

Rick Drayson
Rick Drayson

Reputation: 29

.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
    border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
    border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>

This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above. Using css:

.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
    border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
    border-left: none;
}

Upvotes: 1

animuson
animuson

Reputation: 54757

The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.

See the jsFiddle.

Upvotes: 5

Related Questions