outline-colorプロパティ

値

次の値を色として指定することができます。

• invert – アウトラインの色を背景色を反転させた色にする。初期値。invertをサポートしていないブラウザでは無色として表示。
• カラー名 – アウトラインの色を「black」や「red」などで指定。
• カラーコード – アウトラインの色を16進数のコードで指定。

上下左右の4辺全てに一括指定することしかできないため、borderプロパティのように特定の辺だけ指定するといったことはできません。

アウトラインは指定した要素の外側に線を敷くため、ボーダーよりも外側に表示されます。親要素のmarginプロパティやpaddingプロパティの領域に重なる点に注意してください。

パターン1

アウトラインの色を「invert」と指定している例です。

CSSコード例

<style>
.element1 {
	outline-style: solid;
	outline-color: invert;
}
</style>
<p class="element1"></p>

表示例：

パターン2

アウトラインの色をカラーコードで指定している例です。

CSSコード例

<style>
.element2 {
	outline-style: solid;
	outline-color: #005599;
}
</style>
<p class="element2"></p>

表示例：

パターン3

アウトラインの色をカラー名で指定している例です。

CSSコード例

<style>
.element3 {
	outline-style: solid;
	outline-color: yellow;
}
</style>
<p class="element3"></p>

表示例：