outline-color

  • Revision slug: CSS/outline-color
  • Revision title: outline-color
  • Revision id: 25570
  • Created:
  • Creator: grendel
  • Is current revision? No
  • Comment Moved browser-specific info to the compatibility section.; 63 words added, 83 words removed

Revision Content

{{ CSSRef() }}

Summary

The outline-color CSS property sets 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

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.

Examples

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

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

Specifications

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support   1.5 (1.8)
In versions previous to 1.5: -moz-outline-color
 8.0  7.0  1.2 (125)
invert value    Support had been dropped since 3.0 (1.9)  8.0  7.0  {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

{{ 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).") }}

See also

{{ CSS_Reference:Outline() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> outline-color </code>CSS property sets 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>
<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.</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 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td> </td> <td>1.5 (1.8)<br> In versions previous to 1.5: <code>-moz-outline-color</code></td> <td> 8.0</td> <td> 7.0</td> <td> 1.2 (125)</td> </tr> <tr> <td><code>invert</code> value</td> <td> </td> <td> Support had been dropped since 3.0 (1.9)</td> <td> 8.0</td> <td> 7.0</td> <td> {{ CompatNo() }}</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div>
<p>{{ 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).") }}</p>
<h3>See also</h3>
<p>{{ CSS_Reference:Outline() }}</p>
Revert to this revision