html - Merging outer div with inner div and inner div border active -

i creating tab view using divs. when 1 of tab active, want hide outer divs bottom border see tab selected.

but right see outer div bottom border, not great in image.

desired output:

my div laid as:

<div class='clstabcontainer'>     <div class='clscurrenttab'>dashboard</div>     <div class='clstab'>leads</div>     <div class='clstab'>internet</div>     <div class='clstab'>tasks</div> </div>  .clstabcontainer {     background-color: #ffffff;     padding-left: 0px;     width: 100%;     padding-right: 0px;     white-space: nowrap;     height: 35px;     overflow: hidden;     padding-top: 3px;       border-bottom: #d0d0d0 1px solid; }  .clstab {     overflow-x: visible;     overflow-y: hidden;     background-color: #f0f0f0;     display: inline-block;     white-space: nowrap;     height: 100%;     font-size: 10pt;     vertical-align: middle;     cursor: pointer;         padding: 5px 10px 10px 10px;     margin-left: -1px;     border-left: #d0d0d0 1px solid;     border-right: #d0d0d0 1px solid;     border-top: #d0d0d0 1px solid; }  .clscurrenttab {     overflow-x: visible;     overflow-y: hidden;     background-color: #ffffff;     display: inline-block;     white-space: nowrap;     height: 100%;     font-size: 10pt;     vertical-align: middle;     cursor: pointer;         padding: 5px 10px 10px 10px;     margin-left: -1px;     border-left: #d0d0d0 1px solid;     border-right: #d0d0d0 1px solid;     border-top: #82c600 1px solid;     color: #82c600; } 

how avoid outer divs border bottom on selected div see corresponding tab looks selected.?

following changes in current css achieve this:

.clstab {     height:19px; } .clscurrenttab {     height:20px; } .clstab,.clscurrenttab {     vertical-align: top; } 

remove overflow:hidden .clstabcontainer.

see demo here.