Is there a way to dephase the border of a div?

Question

I'm trying to achieve this design in which every div of certain class of my site shows the border kind of dephased from the actual content of that div as seen in the image (link below). Is there a way to achieve this with css?

Answer 1

If you know the height and width, you can try this: http://jsfiddle.net/9yvd68az/

HTML:

<div class="img-container">
  <img src="https://i.imgur.com/uj0yKZZ.png"/>
</div>

CSS:

.img-container{
  display: inline-block;
  border: 2px solid blue;
  height: 220px;
  width: 220px;
}

.img-container img{
  margin-left: 5px;
  margin-top: 5px;
}

Answer 2

Using pseudo code can bring the desired effect.

.dephased {
  padding: 10px;
  position: relative;
  display: inline-block;
}

.dephased:before {
  content: "";
  position: absolute;
  border: 3px solid blue;
  top: -5px;
  left: -5px;
  width: 90%;
  height: 90%;
  z-index: -1;
}

<div class="dephased"><img src="https://via.placeholder.com/200x300"></div>