outline-color

  • Revision slug: CSS/outline-color
  • Revision title: outline-color
  • Revision id: 25580
  • Created:
  • Creator: syssgx
  • Is current revision? No
  • Comment 10 words added, 4 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

The css code here:

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

produces the following outline color for a 2px outline:

outline-color is blue.

 

Specifications

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support  1.0 1.5 (1.8)
In versions previous to 1.5: -moz-outline-color
 8.0  7.0  1.2 (125)
invert value {{ CompatNo() }} Support had been dropped since 3.0 (1.9)
{{ bug("359497") }}: WONTFIX
Workaround: Use the value of the element's color property. 
 8.0  7.0  {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

 

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><br> Examples</h3>
<p>The css code here:</p>
<pre class="brush: css"> 
 .example {
           /* make the outline red */
           outline-color: #FF0000;
 }
</pre>
<p>produces the following outline color for a 2px outline:</p>
<p class="example" style="outline: 2px solid; outline-color: blue;">outline-color is blue.</p>
<p> </p>
<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> 1.0</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>{{ CompatNo() }}</td> <td>Support had been dropped since 3.0 (1.9)<br> {{ bug("359497") }}: WONTFIX<br> Workaround: Use the value of the element's color property. </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> </p>
<h3 style="display: inline !important; ">See also</h3>
<p> </p>
<p>{{ CSS_Reference:Outline() }}</p>
Revert to this revision