title: CSS wrong appearance of border-radius on a nested div
body: <p>Using the following HTML I need to:</p>
  
  <ul>
  <li><p>Make sure that the border of <code>target div</code> (pink) is adjacent of the <code>wrapper-target</code> red border div.</p></li>
  <li><p>Must work on any value of border-radius.</p></li>
  </ul>
  
  <p>Considering that:</p>
  
  <ul>
  <li>I am using <code>box-sizing: border-box;</code> but can be also reset to a default value.</li>
  <li>I cannot change the <code>border-radius</code> property of the <code>target</code> div.</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *:after,
  *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red;"&gt;
    &lt;div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>NOTES:</p>
  
  <ul>
  <li>I do not need to make a circle in this specific example :).</li>
  </ul>