<div class="c">
  <h2>The <code>outline-offset</code> property</h2>
  <div class="o"></div>

  <input type="range" min="0" max="30" id="o" value="15">

  <p>Adjust the slider to change the amount of offset for the outline.</p>

  <p class="p">Demo by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>
</div>

.c {
  text-align: center;
}

.o {
  width: 100px;
  height: 100px;
  border: solid 1px blue;
  outline: solid 2px hotpink;
  outline-offset: 15px;
  margin: 60px auto;
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}

var o = document.querySelector('.o'),
    oRange = document.getElementById('o');

oRange.addEventListener('input', function () {
  o.style.outlineOffset = this.value + 'px';
}, false);