<p>default</p>
<div class="example01">
  <a href="#"><span class="box-blue"></span></a>
  <a href="#"><span class="box-red"></span></a>
  <a href="#"><span class="box-yellow"></span></a>
</div>

<p>negative margin + border</p>
<div class="example02">
  <a href="#"><span class="box-blue"></span></a>
  <a href="#"><span class="box-red"></span></a>
  <a href="#"><span class="box-yellow"></span></a>
</div>

<p>box-shadow</p>
<div class="example03">
  <a href="#"><span class="box-blue"></span></a>
  <a href="#"><span class="box-red"></span></a>
  <a href="#"><span class="box-yellow"></span></a>
</div>

<p>Pseudo-Elements</p>
<div class="example04">
  <a href="#"><span class="box-blue"></span></a>
  <a href="#"><span class="box-red"></span></a>
  <a href="#"><span class="box-yellow"></span></a>
</div>
body {
  margin: 5em 1em;
}
p {
  margin: 3em 0 1em;
  font-size: 1.5rem;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-align: center;
}
div {
  display: flex;
  width: 600px;
  margin: 0 auto;
}
span[class*="box-"] {
  display: block;
  width: 200px;
  height: 160px;
}
.box-blue {
  background: #3498db;
}
.box-red {
  background: #e74c3c;
}
.box-yellow {
  background: #f1c40f;
}

/* default */
.example01 a:hover {
  border: 10px solid black;
}

/* negative margin + border */
.example02 a:hover {
  position: relative;
  margin: -10px;
  border: 10px solid black;
}

/* box-shadow */
.example03 a:hover {
  position: relative;
  box-shadow: 0 0 0 10px black;
}

/* Pseudo-Elements */
.example04 a:hover {
  position: relative;
}
.example04 a:hover::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  border: 10px solid black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.