title: How to make a border overlay child div?
body: <p>I have to make a border overlay it's content to match the looking of this image:</p>
  <p><a href="https://i.stack.imgur.com/yzW4Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yzW4Z.png" alt="Border overlay CSS" /></a></p>
  <p>And I got the big picture of it:</p>
  <p><a href="https://i.stack.imgur.com/BSCPo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BSCPo.png" alt="offset border using CSS" /></a></p>
  <p>And I need to make that border overlay the green content. How can I accomplish it? I can't use <code>z-index</code> for this, as I researched. The HTML and CSS code follows:</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>.box-border a {
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
  }
  
  .box-border a:hover {
    text-decoration: none;
    color: white;
    cursor: pointer;
  }
  
  
  .box-border-participe {
    position: relative;
    float: right;
    margin-right: 30%;
    border: 4px solid white;
  }
  
  .box-participe {
    background-color: #94C120;
    padding: 10px 40px;
    margin-left: 5px;
    margin-top: 5px;
    margin-bottom: -20px;
    margin-right: -20px;
  }
  
  body {
    background:grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box-border box-border-participe"&gt;
    &lt;div class="box-participe"&gt;
      &lt;a&gt;Participe&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>