outline-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

outline-color は CSS のプロパティで、要素の輪郭線の色を設定します。

試してみましょう

outline-color: red;

outline-color: #32a1ce;

outline-color: rgba(170, 50, 220, 0.6);

outline-color: hsla(60, 90%, 50%, 0.8);

outline-color: currentcolor;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

構文

css
/* <color> 値 */
outline-color: #f92525;
outline-color: rgb(30 222 121);
outline-color: blue;

/* グローバル値 */
outline-color: inherit;
outline-color: initial;
outline-color: revert;
outline-color: revert-layer;
outline-color: unset;

outline-color プロパティは、以下に挙げた値のうちの一つで指定します。

値

<color>

輪郭線の色であり、<color> で指定します。

仕様書では、追加の値として auto も挙げられていますが、これは現在どのブラウザーも対応していません。実装された場合、 auto は、輪郭線が auto に設定されない限り currentcolor に計算されます。ただし、 outline-style が auto に設定されている場合は、アクセントカラーに計算されます。

解説

輪郭線は要素の周囲、 border の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

輪郭線の表示方法を定義する際は、一括指定プロパティの outline を使用したほうが普通は便利です。

アクセシビリティ

独自のフォーカススタイルを作成するときに、ふつう outline プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

公式定義

初期値auto
適用対象すべての要素
継承なし
計算値キーワード auto の場合は、計算値も currentcolor。色の場合は、半透明であれば、計算値はそれに一致する rbga() で、不透明であれば、それに一致する rgb()。キーワード transparent は rgba(0,0,0,0) に対応付けられる。
アニメーションの種類色

形式文法

outline-color = 
  auto        |
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

例

青い実線の輪郭線の設定

HTML

html
<p>見ての通り、輪郭線は青です。</p>

CSS

css
p {
  outline: 2px solid; /* 輪郭線の幅と種類 */
  outline-color: #0000ff; /* 輪郭線を青にする */
  margin: 5px;
}

結果

仕様書

Specification
CSS Basic User Interface Module Level 4
# outline-color

ブラウザーの互換性

関連情報