<div class="container">
  <p>
    All of the following boxes have a 2px solid black border. The outline is drawn outside the border.
  </p>
  <div class="element one">I have a 1px solid outline.</div>
  <div class="element two">I have a 1.5em solid outline.</div>
  <div class="element three">I have a 10px solid outline.</div>
  <div class="element four">I have a 10% solid outline.</div>
  <div class="element thin">I have a thin solid outline.</div>
  <div class="element medium">I have a medium solid outline.</div>
  <div class="element thick">I have a thick solid outline.</div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  display: block;
  margin: 60px auto;
  max-width: 250px;
  height: 50px;
  border: 2px solid black;
  background-color: white;
  text-align: center;
  line-height: 50px;
  outline-style: solid;
  outline-color: deepPink;
}

.element:hover {
  background-color: #eee;
}

.one {
  outline-width: 1px;
}

.two {
  outline-width: 1.5em;
}

.three {
  outline-width: 10px;
}

.four {
  outline-width: 10%;
}

.thin {
  outline-width: thin;
}

.medium {
  outline-width: medium;
}

.thick {
  outline-width: thick;
}