Collapse borders of nested DIVs

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;
}