.square {
display: block;
width: 100px;
height: 100px;
color: black;
text-align: center;
transition: border .2s linear;
}
.square:hover {
border: 2px red solid;
}
<div class="square">
Square
</div>
Какой именно отступ убрать нужно? Если нужно убрать смещение текста, то можно сделать так.
.square {
display: block;
width: 100px;
height: 100px;
color: black;
text-align: center;
transition: border-color .2s linear;
border: 2px solid transparent;
}
.square:hover {
border-color: red;
}
<div class="square">
Square
</div>
border: 2px transparent solid
box-sizing: border-box
в зависимости от желаемого поведения