outline-color

  • Revision slug: Web/CSS/outline-color
  • Revision title: outline-color
  • Revision id: 494327
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

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.

{{cssbox("outline-color")}}

Syntax

Formal syntax: {{csssyntax("outline-color")}}
outline-color: invert
outline-color: red

outline-color: 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. Note that browser are not required to support it. If not, they just consider the statement as invalid

Examples

The css code here:

.example {
  /* make the outline blue */
  outline-color: #0000FF;
}

produces the following outline color for a 2px outline:

outline-color is blue.

Specifications

Specification Status Comment
{{SpecName('CSS3 UI', '#outline-color', 'outline-color')}} {{Spec2('CSS3 UI')}} No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}} {{Spec2('CSS3 Transitions')}} Defines outline-color as animatable.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}} {{Spec2('CSS2.1')}}  

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

<div>
 {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<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>
<p>{{cssbox("outline-color")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("outline-color")}}
</pre>
<pre>
outline-color: invert
outline-color: red

outline-color: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <code>&lt;color&gt;</code></dt>
 <dd>
  See {{Xref_csscolorvalue}} for the various color keywords and notations.</dd>
 <dt>
  <code>invert</code></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. Note that browser are not required to support it. If not, they just consider the statement as invalid</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>The css code here:</p>
<pre class="brush: css; highlight:[3]">
.example {
  /* make the outline blue */
  outline-color: #0000FF;
}</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>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 UI', '#outline-color', 'outline-color')}}</td>
   <td>{{Spec2('CSS3 UI')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>outline-color</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
 {{CompatibilityTable}}</div>
<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>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{CSS_Reference:Outline}}</li>
</ul>
Revert to this revision