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.

Solution 1

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

Solution 2

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

Comments

[Hashem Qolami]

:last-child doesn't respect the class names, it only works if the last child of the parent element matching div.box.

[Hashem Qolami]

Again :last-child pseudo class represents the last child of its parent, This only works if the last child of the parent element matching .box.

[BoltClock]

Although to be fair if all the children are div.box anyway there's probably nothing wrong with using :last-child. Just something to keep in mind though.

[Hashem Qolami]

Btw, the other content may appear after the fourth .box element, in this case the box should have a border.