<h2>Using negative values for outline-offset</h2>

<div class="box"></div>

<input type="range" min="-40" max="0" id="o" value="-40">

<output>offset value: -40px</output>

body {
  padding: 40px;
  text-align: center;
}

h2 {
  margin: 0 0 60px;
}

.box {
  width: 200px;
  height: 200px;
  background: #ccc;
  margin: auto;
  border: solid 8px yellow;
  outline: solid 8px orange;
  outline-offset: -40px;
}

input {
  margin-top: 40px;
  width: 200px;
}

output {
  display: block;
  margin-top: 40px;
}

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

oRange.addEventListener('input', function () {
  o.style.outlineOffset = this.value + 'px';
  document.querySelector('output').textContent = 'offset value: ' + this.value + 'px';
}, false);