MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    outline-color Redirect 1

    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.

    • Initial value invert, for browsers supporting it, currentColor for the other
    • Applies to all elements
    • Inherited no
    • Media visual, interactive
    • Computed value For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).
    • Animatable yes, as a color
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: <color> | invert
    
    outline-color: invert
    outline-color: red
    
    outline-color: inherit
    

    Values

    <color>
    See <color> 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 browsers 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
    CSS Basic User Interface Module Level 3 Working Draft No change.
    CSS Transitions Working Draft Defines outline-color as animatable.
    CSS Level 2 (Revision 1) Recommendation  

    Browser compatibility

    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 Not supported 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 Not supported
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,
    Hide Sidebar