title: Collapse borders of nested DIVs
body: <p>I have a problem styling nested DIVs (<a href="http://jsfiddle.net/wP3CB/" rel="nofollow">see here for an example</a>).</p>
  
  <p>I have some nested DIVs (with <code>class="box"</code>) which are dynamically rendered, e.g:</p>
  
  <pre><code>&lt;div class="box" id="1"&gt;
    other content
    &lt;div class="box" id="2"&gt;
      &lt;div class="box" id="3"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    other content
    &lt;div class="box" id="4"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  other content
  </code></pre>
  
  <p>I'd like these DIVs to have a border at the bottom:</p>
  
  <pre><code>&lt;style&gt;
  div.box {border-bottom: solid 1px gray;}
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Is it possible to collapse the borders of nested DIVs, if they are adjacent?</p>
  
  <p>I tried adding <code>border-collapse: collapse</code>, but that didn't help.</p>