Подвинуть border относительно картинки

.image { 
  position: relative; 
  width: 150px; 
  height: 150px; 
  background-image: url("https://graph.facebook.com/625308780945294/picture?type=large"); 
} 
 
.image:before { 
  content: ""; 
  position: absolute; 
  border: 2px solid #c745bc; 
  left: 20%; 
  top: 20%; 
  width: 100%; 
  height: 100%; 
  z-index: -1; 
}

<div class="image"> 
</div>

img { 
  width: 150px; 
  height: 150px; 
  box-shadow: 16px 16px 0px #fff, 18px 18px 0px #c745bc, 18px 14px 0px #c745bc, 14px 18px 0px #c745bc; 
}

<img src="https://graph.facebook.com/625308780945294/picture?type=large">

div { 
  position: relative; 
  padding: 10px; 
  display: inline-block; 
  margin: 20px; 
  background: #eee; 
} 
 
div:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  border: 2px solid red; 
  transform: translate(15px, -15px); 
  z-index: -1; 
}

<div><img src="http://put-k-uspehy.ru/wp-content/uploads/2011/12/elka_na_sayt.gif" alt=""></div>

div { 
  width: 100px; 
  height: 100px; 
  border: 2px solid black; 
  position: relative; 
} 
 
img { 
  width: 100px; 
  height: 100px; 
  position: absolute; 
  left: -10px; 
  top: 10px; 
}

<div> 
  <img src="http://lomets.com/wp-content/uploads/2016/04/Stephanie-Beck-3.png" alt=""> 
</div>