title: CSS "2D" border issue
body: <p>I'm trying to do this border, but I cant get it to work, I was wondering if anyone has any idea of how to accomplish this:</p>
  
  <p><a href="https://i.stack.imgur.com/rlPLB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rlPLB.jpg" alt="CSS Border"></a></p>
  
  <p>So far this is what I've got, I am trying with box shadow, but I can use any other solution.</p>
  
  <pre><code>&lt;ul class="loteos-archive"&gt;
  
     &lt;li&gt;
  
        &lt;div class="loteos-square-bg"&gt;
          &lt;a class="thumb" href="#" style="background-image:url( image.jpg );"&gt;&lt;/a&gt;   
        &lt;/div&gt;
  
      &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>ul.loteos-archive li .loteos-square-bg{
    height: 400px;
    width: 100%;
    -webkit-box-shadow: -5px 4px 0px -4px blue;
    -moz-box-shadow: -5px 4px 0px -4px blue;
    box-shadow: -5px 4px 0px -4px blue;
  }
  ul.loteos-archive li .loteos-square-bg a.thumb{
    width   : 100%;
    height  : 400px;   
    background-repeat: no-repeat;
    background-size: cover;
    display: block;   
  }
  </code></pre>
  
  <p>Thanks in advance.</p>