mozilla

Revision 25567 of outline-color

  • Revision slug: CSS/outline-color
  • Revision title: outline-color
  • Revision id: 25567
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Beefed up description on the "invert" keyword of the property.; 16 words added; page display name reset to default

Revision Content

{{ CSSRef() }}

Summary

The outline-color CSS property is used to set the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:

  • {{ Xref_cssinitial() }}: {{ Cssxref("invert") }}
    Used value in Gecko (Firefox): The value of the color property
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: 'invert' or the computed color value

In browsers previous to Gecko 1.8 (Firefox 1.5) web developers could achieve the same effect with the Mozilla CSS Extension -moz-outline-color.

Syntax

 outline-color:  <color> | invert | inherit

Values

<color>
See {{ Xref_csscolorvalue() }} for the various color keywords and notations.
invert
To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Currently only supported in Opera and IE8.
{{ unimplemented_inline() }} {{ bug("359497") }}, WONTFIX.{{ note("Since Gecko 1.9 (Firefox 3) the value of the element's color property is used for this (worked as expected before).") }}

Examples

{{ CSSRefExampleLink("outline-color") }} {{ Fixeg() }}

 .example {
           /* make the outline red */
           outline-color: #FF0000;
 }

Specifications

  • See {{ Cssxref("outline") }} property.

Browser compatibility

Browser Lowest Version
outline-color property invert value
Internet Explorer 8.0 8.0
Firefox (Gecko) 1.5 (1.8) support dropped since 3.0 (1.9)
Opera 7.0 7.0
Safari (WebKit) 1.2 (125) ---

See also

{{ CSS_Reference:Outline() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> outline-color </code>CSS property is used to set the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("invert") }}<br> Used value in Gecko (Firefox): The value of the<code> color </code>property</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li><em>Percentages:</em> n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: 'invert' or the computed color value</li>
</ul>
<p>In browsers previous to Gecko 1.8 (Firefox 1.5) web developers could achieve the same effect with the <a href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extension</a><code> -moz-outline-color</code>.</p>
<h3>Syntax</h3>
<pre> outline-color:  &lt;color&gt; | invert | inherit</pre>
<h3>Values</h3>
<dl> <dt>&lt;color&gt;</dt> <dd>See {{ Xref_csscolorvalue() }} for the various color keywords and notations.</dd> <dt>invert</dt> <dd>To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Currently only supported in Opera and IE8. <br> {{ unimplemented_inline() }} {{ bug("359497") }}, WONTFIX.{{ note("Since Gecko 1.9 (Firefox 3) the value of the element's color property is used for this (worked as expected before).") }}</dd>
</dl>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("outline-color") }} {{ Fixeg() }}</p>
<pre> .example {
           /* make the outline red */
           outline-color: #FF0000;
 }</pre>
<h3>Specifications</h3>
<ul> <li>See {{ Cssxref("outline") }} property.</li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th rowspan="2">Browser</th> <th colspan="2" style="text-align: center;">Lowest Version</th> </tr> <tr> <th>outline-color property</th> <th>invert value</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>8.0</strong></td> <td>8.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.5</strong> (1.8)</td> <td>support dropped since 3.0 (1.9)</td> </tr> <tr> <td>Opera</td> <td><strong>7.0</strong></td> <td>7.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.2</strong> (125)</td> <td>---</td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ CSS_Reference:Outline() }}</p>
Revert to this revision