Little Web Hut

CSS 2.1 Reference: outline Property

CSS outline Property
Syntax
selector {outline: color style width;}
  • color 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, or invert.
  • style is specified by using one of the following keywords: none, dotted, dashed, solid, double, groove, ridge, inset, or outset.
  • width is specified by using a length or one of the following keywords: thin, medium, or thick.
  • color, style, and width are all OPTIONAL but at least one of them must occur.
(OR)
selector {outline: value;}
  • value is specified by using the keyword inherit.
Usage

The outline property is used as a shorthand method to specify the following 3 outline properties all in one place.


CSS Example: The outline property is set by specifying all 3 values.
h1 {outline: red solid thin;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • color 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.
  • style keywords:
    • none - No border.
    • dotted - This is a sample
    • dashed - This is a sample
    • solid - This is a sample
    • double - This is a sample
    • groove - This is a sample
    • ridge - This is a sample
    • inset - This is a sample
    • outset - This is a sample

    Note: The outline style samples, shown above, may not appear identically in all browsers.

  • width keywords:
    • thin
    • medium
    • thick
  • inherit - A single inherit keyword is used to specify that the values for this property should be taken from the parent element. If inherit is used with the root element, then the initial values for this property will be used. When the inherit keyword is used, no other property values are allowed.
Applies To All elements
Inherited No
Initial Value


outline Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe outline property is set by specifying all 3 values.