title: How do I give a CSS octagon shape a full border?
body: <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>