outline,outline-style,outline-width,outline-color,outline-offset 「アウトラインの表示」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_outline{
  outline : #ff00ff 5px inset;
}
.css_outline2{
  outline : #ff00ff 5px;
}
.css_outline_offset_1{
  outline : ridge;
  outline-offset : 5px;
}
.css_outline-s-w-c{
  outline-style : inset;
  outline-width : 5px;
  outline-color : #ff00ff;
}
.css_outline-w-c{
  outline-width : 5px;
  outline-color : #ff00ff;
}
.css_outline_offset_2{
  outline-style : ridge;
  outline-offset : 5px;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">outlineにスタイル、太さ、色指定</div>
  <div class="css_outline">
  アウトライン表示。
  </div>
  <div class="cssTitle">style,width,color指定</div>
  <div class="css_outline-s-w-c">
  アウトライン表示。(outline指定と同じ)
  </div>
  <div class="cssTitle">outlineにスタイルのみ指定。offset指定</div>
  <div class="css_outline_offset_1">
  アウトラインが離れて表示。<br>スタイル以外は初期値。
  </div>
  <div class="cssTitle">styleのみ指定。offset指定</div>
  <div class="css_outline_offset_2">
  アウトラインが離れて表示。<br>style以外は初期値。(outline指定と同じ)
  </div>
  <div class="cssTitle">outlineに太さ、色のみ指定</div>
  <div class="css_outline2">
  スタイル指定ないため、アウトラインが非表示。
  </div>
  <div class="cssTitle">width,colorのみ指定</div>
  <div class="css_outline-w-c">
  style指定ないため、アウトラインが非表示。
  </div>