How do I give a CSS octagon shape a full border?
<p>I am trying to take this css Octagon and give it a solid red border. However, when i add the border it only works on portion of the shape. Does anyone have a solution for this?</p>

<p><a href="https://i.stack.imgur.com/kQ6Eh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kQ6Eh.jpg" alt="enter image description here"></a></p>

<p>Here is a <a href="https://jsfiddle.net/kfvnbxp0/3/" rel="nofollow noreferrer">JS FIDDLE</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class='octagonWrap'&gt;
      &lt;div class='octagon'&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.octagonWrap{
        width:200px;
        height:200px;
        float: left;
        position: relative;
        }
    .octagon{
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        overflow: hidden;
        }
    .octagon:before {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        transform: rotate(45deg);
        background: #777;
        content: '';
        border: 3px solid red;
        }
</code></pre>