Collapse borders of nested DIVs - css

Question

I have a problem styling nested DIVs (see here for an example).
I have some nested DIVs (with class="box") which are dynamically rendered, e.g:
<div class="box" id="1">
other content
<div class="box" id="2">
<div class="box" id="3">
</div>
</div>
other content
<div class="box" id="4">
</div>
</div>
other content
I'd like these DIVs to have a border at the bottom:
<style>
div.box {border-bottom: solid 1px gray;}
</style>
The problem is, when the bottom border of two nested DIVs are adjacent (e.g. box 2 and 3 or box 1 and 4), then the result is a gray line of 2 (or more pixels) height.
Is it possible to collapse the borders of nested DIVs, if they are adjacent?
I tried adding border-collapse: collapse, but that didn't help.

Answer 1

border-collapse property is only applicable to table and inline-table elements.
Try adding margin-bottom property to .box elements with a negative value to overlap the borders as follows:
Example Here
div.box {
border-bottom: solid 1px gray;
margin-bottom: -1px;
}

Answer 2

The border collapse doesn't work, I got it working with your JsFiddle but you probably have to change it because you're DIVs are dynamically created.
div.box > div.box {
border-bottom: solid 1px gray;
}
div.box > div.box > div.box:last-child {
border-bottom: none;
}

Answer 3

css property border-collapse works only with tables...
If you are using div then you can use :last-child selector of css3 to desable border on last .box element
e.g.
box .box:last-child{border:none;}

Answer 4

There is many ways to do that:
1) Make your divs behave like table\table-cell elements.
HTML
<div class="wrapper2">
<div class="row"></div>
<div class="row"></div>
</div>
SCSS
.wrapper2 {
display: table; border-collapse: collapse; margin-bottom: 15px;
.row {
width: 200px; height: 100px; background: green; border: 1px solid red; display: table-cell;
}
}
2) Just select div you need and remove border from one side
HTML
<div class="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="clearfix"></div>
</div>
SCSS
.wrapper {
width: 404px; margin-bottom: 15px;
.row {
width: 200px; height: 100px; background: green; border: 1px solid red; float: right;
&:first-child { border-left: 0; }
}
.clearfix { clear: both; }
}
3) Overlap divs
HTML
<div class="wrapper3">
<div class="row"></div>
<div class="row move-left"></div>
<div class="clearfix"></div>
</div>
SCSS
.wrapper3 {
width: 404px; margin-bottom: 15px;
.row {
position: relative; width: 200px; height: 100px; background: green; border: 1px solid red; float: left;
&.move-left { left: -1px }
}
.clearfix { clear: both; }
}
All 3 examples on jsfiddle
Just pick something that till fit your project