title: Nested divs: how can I get overlapping borders?
body: <p>The following image shows the desired result:</p>
  
  <p><img src="https://i.stack.imgur.com/7tVrI.png" alt="Desider result"></p>
  
  <p>Below where I arrived using <code>position: relative</code>:</p>
  
  <pre><code>&lt;div class="tags-container"&gt;
      &lt;div class="tag"&gt;Pizza&lt;/div&gt;
      &lt;div class="tag"&gt;Spaghetti&lt;/div&gt;
      &lt;div class="tag"&gt;Mandolino&lt;/div&gt;
      &lt;div class="tag"&gt;Pizza&lt;/div&gt;
      &lt;div class="tag"&gt;Spaghetti&lt;/div&gt;
      &lt;div class="tag"&gt;Mandolino&lt;/div&gt;
      &lt;div style="clear: both"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.tags-container {   
      border: 1px solid #ff0000;
      width: 300px;
  }
  .tag {
      float: left;
      position: relative;
      top: -1px;
      left: -1px;
      padding: 5px;
      border: 1px solid #ff0000;
  }
  </code></pre>
  
  <p><a href="http://www.lucagiorcelli.it/test/testing-borders.html" rel="noreferrer">http://www.lucagiorcelli.it/test/testing-borders.html</a></p>