How to create serveral div with "shared border"? - html

Question

I'm trying to figure out how to beautifully group divs together to create more creative shapes outline. Basically I wanted to make a textbox with shared border. I've maded a ugly sample over THERE
.white-box{
width: 300px;
}
.white-box-tab{
position: relative;
left: 8px;
width: 45%;
height: 25px;
background: #fff;
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1), -1px 0px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px 3px 0px 0px;
text-align: center;
}
.white-box-tab:after{
content:'';
width:100%;
height:1px;
position:absolute;
background:white;
bottom: -0.5px;
left: 0px;
}
.white-box-body{
width: 100%;
height: 200px;
background: #fff;
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1), -1px -1px 1px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px 3px 3px 3px;
}
<div class="white-box">
<div class="white-box-tab">
The title
</div>
<div></div>
<div class="white-box-body">
</div>
</div>
However, the way I acheive it just feels quite ugly and unexpandable. Is there a better way to complete task like that?

Answer 1

I would simply do not apply bottom border to element and move it down by other div border width:
.white-box {
width: 300px;
}
.white-box .box {
border: 1px solid #ddd;
background-color: white;
}
.white-box .box.white-box-tab {
border-bottom: none;
position: relative;
top: 1px;
margin-left: 5%;
width: 70%;
z-index: 10;
}
.white-box-body {
height: 300px;
}
<div class="white-box">
<div class="box white-box-tab">
The title
</div>
<div></div>
<div class="box white-box-body">
</div>
</div>