title: How to overlap image border with div border
body: <p>i want to have two borders. The first one is the red-one of the image, which is rounded. The second is the blue-one of the div. Now i want that the red-one is over the blue-one so it look likes the blue-one has round curves at the start. But i only get the blue-one above the red-one. Can you help me with my struggle? </p>
  
  <p><strong>Question:</strong> How to get the red-border above the blue-border?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.imageWrapper {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      height: 60px;
  }
  
  .image {
      width: 50px;
      height: 50px;
      border: 5px solid red;
      border-radius: 50%;
      z-index: 1;
  }
  
  .info {
      position: relative;
      font-size: 80%;
      display: inline-block;
      vertical-align: middle;
      width: 100px;
      height: 36px;
      line-height: 18px;
      padding: 5px 20px 5px 25px;
      border-color: blue;
      border-style: solid;
      border-width: 5px 5px 5px 0;
      margin-left: -20px;
  }
  
  .maintext {
      width: 100px;
      font-weight: 700;
  }
  
  .subtext {
      width: 100px;
  }
  
  .ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="imageWrapper"&gt;
      &lt;img src="http://lorempixel.com/output/technics-q-g-100-100-9.jpg" class="image"&gt;
    &lt;/div&gt;&lt;!-- remove the white space of inline-block
    --&gt;&lt;div class="info"&gt;
      &lt;div class="maintext ellipsis"&gt;Title here!&lt;/div&gt;
      &lt;div class="subtext ellipsis"&gt;Subtitle here!&lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>