<div class="container">
  <p>
    All of the following boxes have a 3px solid black border. The outline is drawn outside the border.
  </p>
  <div class="element">
    I have a pink outline and a black border. The <code>outline-offset</code> is set to <code>1em</code>.
  </div>
  <div class="element element-2">
    I have a blue outline and a black border. The <code>outline-offset</code> is set to <code>2.5em</code>. My outline overlaps the element above me.
  </div>
</div>
body {
  background-color: #fff;
  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: 400px;
  padding: 20px;
  border: 3px solid black;
  background-color: white;
  text-align: center;
  outline: 10px solid deepPink;
  outline-offset: 1em;
}

.element-2 {
  outline: 10px dotted #0099CC;
  outline-offset: 2em;
}