Little Web Hut

CSS 2.1 Reference: outline-color Property

CSS outline-color Property
Syntax
selector {outline-color: value ;}
  • value is specified by using a color-value or one of the following keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow, invert or inherit.
Usage

The outline-color property is used to specify the outline color. The outline property generates an outline around the content and border area of the element's box. See the Box Model for a description of the boxes that are generated for elements and the relative position of the content area and borders. Unlike the border property, the outline property is displayed on top of the element's box and it does not influence the size or position of the element's box.

This property is specified by using a color-value, or a keyword, according to the syntax shown above.


CSS Example: The outline-color property is set using the keyword red.
h1 {outline-color: red;
    outline-style: solid;
    outline-width: thick;
}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The outline-color property is set using a RGB 6-Digit Hexadecimal value of #ffa500.
h1 {outline-color: #ffa500;
    outline-style: solid;
    outline-width: thick;
}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

CSS Example: The outline-color property is set using a RGB Percentage Functional Notation value of rgb(30%,50%,70%).
h1 {outline-color: rgb(30%,50%,70%);
    outline-style: solid;
    outline-width: thick;
}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • aqua - aqua = #00ffff = rgb(0,255,255)
  • black - black = #000000 = rgb(0,0,0)
  • blue - blue = #0000ff = rgb(0,0,255)
  • fuchsia - fuchsia = #ff00ff = rgb(255,0,255)
  • gray - gray = #808080 = rgb(128,128,128)
  • green - green = #008000 = rgb(0,128,0)
  • lime - lime = #00ff00 = rgb(0,255,0)
  • maroon - maroon = #800000 = rgb(128,0,0)
  • navy - navy = #000080 = rgb(0,0,128)
  • olive - olive = #808000 = rgb(128,128,0)
  • orange - orange = #ffa500 = rgb(255,165,0)
  • purple - purple = #800080 = rgb(128,0,128)
  • red - red = #ff0000 = rgb(255,0,0)
  • silver - silver = #c0c0c0 = rgb(192,192,192)
  • teal - teal = #008080 = rgb(0,128,128)
  • white - white = #ffffff = rgb(255,255,255)
  • yellow - yellow = #ffff00 = rgb(255,255,0)
  • invert - Invert the color.
  • inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.
Applies To All elements
Inherited No
Initial Value invert


outline-color Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe outline-color property is set using the keyword red.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe outline-color property is set using a RGB 6-Digit Hexadecimal value of #ffa500.
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe outline-color property is set using a RGB Percentage Functional Notation value of rgb(30%,50%,70%).