アウトライン(輪郭線)の色を設定する

CSS - outline-color

概要

CSSプロパティ「outline-color」は、アウトライン(輪郭線)の色を指定することができます。ショートハンドで記述する方法は outline プロパティを使います。

<p>初期値のアウトラインを表示</p>
<p class="outline-color">アウトラインカラーを変更します</p>
<style>
p {
  background: #def;
  outline: solid;
}
.outline-color {
  outline-color: #ddd;
} 
</style>
説明
color 色を指定します. #000000やrgb(0,0,0)でも指定できます
invert初期値。ブラウザ依存の地の色を反転させた色を使います

指定する色については color プロパティに詳細が掲載されています。

使用例

button要素が押されたときに表示されてるoutlineの色を変えてみます。

<p>それぞれのボタンを押してみてください</p>
<button>初期設定のアウトライン色です</button><br>
<button class="outline-color">アウトラインの色を設定しました</button>
<style>
button {
  background: #eef;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 10px;
}  
.outline-color {
  outline-color: green;
}
</style>

仕様書

関連CSSプロパティ