Border Overlap

HTML

<div class="parent">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
   </div>

CSS

.parent {
  border:5px solid red;
  display:inline-block;
  position: relative;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
  position: relative;
}

.parent a:hover{
  border:5px solid #ddd;
  margin: -5px;
}