CSSの「outline-offset」プロパティの確認です。「outline-offset」プロパティは、要素のボーダー境界とアウトラインとの間隔を指定します。正の値を指定すれば、要素のボーダー境界の外側にその値分、また、負の値を指定すれば、要素のボーダー境界から内に向かってその値分をとってアウトラインを表示します。

サンプルはすべて、横500px、縦100pxのboxです。sample1はサイズにborder-size分を含まない「box-sizing:content-box」で、border-sizeは 15pxです。sample2は、サイズにborder-size分を含む「box-sizing:border-box」で、同じくborder-sizeは 15pxです。sample3はborder-sizeが0（border無し）です。枝番の「-1」は、outline-offset指定無し（0）で、「-2」は、20px、「-3」は、-20pxにしてあります。

サンプルのhtmlコード

  <div class="box1 sample1">sample1-1</div>
  <div class="box1 sample2">sample2-2</div>
  <div class="box1 sample3">sample3-3</div>
  <div class="box2 sample1">sample1-2</div>
  <div class="box2 sample2">sample2-2</div>
  <div class="box2 sample3">sample3-2</div>
  <div class="box3 sample1">sample1-3</div>
  <div class="box3 sample2">sample2-3</div>
  <div class="box3 sample3">sample3-3</div>

サンプルのCSSコード

.box1,.box2,.box3 {
 	width: 500px;
	height: 100px;
	margin: 30px auto;
	background: #fff;
	border: 15px solid #999;
	box-sizing: content-box;
	}
.box2 {
	box-sizing: border-box;
	}
.box3 {
	border: none;
	}
.sample1,.sample2,.sample3 {
	outline-style: solid;
	outline-width: 1px;
	outline-color: deeppink;
	}
.sample2 {
	outline-offset: 20px;
	}
.sample3 {
	outline-offset: -20px;
	}

サンプル