To create outlines around HTML objects, the properties outline, outline-width, outline-style and outline-color may be used. Outlines are usually created to visually emphasize an object, such as buttons or images, and they differ from the borders in sense that they don't take up space and may be non-rectangular. The outline is also drawn equally on all four sides of the object.

Outline property

The outline property contains following information:

  1. value: [<outline-color>, <outline-style>, <outline-width>] or inherit;
  2. initial: depends on individual properties;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual, interactive;
  7. computed value: depends on individual properties.

Outline-width property

The outline-width property contains following information:

  1. value: <border-width> or inherit;
  2. initial: medium;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual, interactive;
  7. computed value: absolute length or "0" if the style is "none".

Outline-style property

The outline-style property contains following information:

  1. value: <border-style> or inherit;
  2. initial: none;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual, interactive;
  7. computed value:as specified.

Outline-color property

The outline-color property contains following information:

  1. value: <border-color> invert or inherit;
  2. initial: invert;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual, interactive;
  7. computed value:as specified.

The outline is drawn over the box and it is always visual, meaning it's always on top and it does not affect the box to overflow or reflow.

The properties outline-width and outline-style share the same characteristics like the border properties minus the value hidden which is illegal . The property outline-color accept all the colors as well as the keyword invert which performs a color inversion on the pixels on the screen which makes the focus always visible. However some browser will ignore value invert due various reasons.

The property outline is a shorthand for all other three properties together.

Example

CSS outlines example:

 

›› go to examples ››