【outline-color】アウトラインの色を指定

outline-colorプロパティでは、アウトラインの色を指定することができます。

アウトラインとは要素の縁取り(輪郭線)のことで、ボタンや入力フィールドなどに輪郭線をつけて強調したい時などに、outline-colorプロパティや他のアウトラインに関するプロパティが使用されます。

またボーダー(border)とアウトラインの違いですが、アウトラインはボーダーのすぐ外側の位置にボックスを重ねて表示されます。 このため、ボックスのサイズや配置に影響することはありません。 また常に矩形(すべての角が直角の長方形、四辺形)で表示されるわけではありません。 他にもoutline-topやoutline-bottomのような辺ごとに個別に指定できるプロパティはありませんので、注意して下さい。

アウトラインの色以外も含めまとめて指定したい場合は、outlineプロパティを使用するとアウトラインの色・形式・幅を一括で設定することができます。

なおoutline-colorプロパティを有効にするにはoutline-styleを併せて指定し、none以外の値を設定します。 outline-styleの値は初期値がnoneとなっているため、outline-colorのみを設定してもアウトラインは表示されませんので注意して下さい。

書式

  • outline-color : ……… アウトラインの色を指定する

★:色、invert、inherit

RGB値、またはキーワードなどで色を指定します。指定できる色についてはカラーコード一覧を参照
invert
対象の色を反転した色にする(初期値)

使用した時の例

.sample1 {outline-color: #FF8484;}
.sample2 {outline-color: invert;}
.sample3 {outline-color: blue;}
.sample4:focus {outline-color: #FF8484;}

div,sample3,sample4 {outline-style:solid;}
<div class="sample1">sample1</div>
<div class="sample2">sample2</div>
<div>
  sample3: <input type="text" class="sample3">
</div>
<div>
  sample4: <input type="text" class="sample4">
</div>

ブラウザ上の表示例

sample1
sample2
sample3:
sample4:

対応ブラウザなどのデータ

初期値 invert 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer8~ , Google Chrome1~ , Firefox1.5~ , Opera7~ , Safari1.2~

関連情報