<div class="c">
  <h2> <code>outline-offset</code> ویژگی</h2>
  <div class="o"></div>

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

  <p>تنظیم نوار لغزنده برای تغییر میزان فاصله</p>

 

.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);