Смещение содержимого блока от бордера

div{ 
 width: 100px; 
 height: 100px; 
 background-color: gray; 
 border: 10px solid transparent; 
 } 
  
 div:hover{ 
  border: 10px solid red; 
  }

<div></div>

	div{ 
	 width: 100px; 
	 height: 100px; 
	 background-image: url("http://img.clipartall.com/emotion-smiley-faces-clip-art-clipart-best-emotion-faces-clip-art-631_632.jpg"); 
	 background-repeat: no-repeat; 
	 background-size: cover; 
	 margin: 10px; 
	 overflow: hidden; 
	 } 
 
	 div:hover{ 
	  box-shadow: 0 0 2px 2px red; 
	  }

<div></div>

.test { 
  background: #999; 
  height: 100px; 
  width: 100px; 
} 
 
.test:hover { 
  outline: 4px solid red; 
}

<div class="test"></div>