title: how to set CSS border-left outside of box
body: <p>I have element with 3 borders: <code>left (4px), top (1px) and bottom (1px)</code>:</p>
  
  <p><img src="https://i.stack.imgur.com/aUTcx.png" alt="enter image description here"></p>
  
  <p>But border-left looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/lld2v.png" alt="enter image description here"></p>
  
  <p>how to set border-left outside of the box, to make render without cutting of edges?</p>
  
  <p>This is Example of my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a class="element"&gt;Some Text&lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.element {
      display: block;
      width: 200px;
      height: 40px;
      border-top: 1px solid gray;
      border-bottom: 1px solid gray;
      border-left: 4px solid red;
  }
  </code></pre>