HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

アウトライン カラー

outline-colorプロパティ

アウトラインの色を指定するためのプロパティです。

  • 初期値

    invert

  • 継承

    不可

  • 適用できる要素

    全要素

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

  • 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>

表示例: