Showing posts with label CSS Outline. Show all posts
Showing posts with label CSS Outline. Show all posts

Saturday, August 18, 2012

CSS Outline


An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
The outline properties specify the style, color, and width of an outline.

Examples

Draw a line around an element (outline)
This example demonstrates how to draw a line around an element, outside the border edge.

Set the style of an outline
This example demonstrates how to set the style of an outline.

Set the color of an outline
This example demonstrates how to set the color of an outline.

Set the width of an outline
This example demonstrates how to set the width of an outline.

CSS Outline

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".

However, the outline property is different from the border property.

The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.

Outline 

All CSS Outline Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

PropertyDescriptionValuesCSS
outlineSets all the outline properties in one declarationoutline-color
outline-style
outline-width
inherit
2
outline-colorSets the color of an outlinecolor_name
hex_number
rgb_number
invert
inherit
2
outline-styleSets the style of an outlinenone
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-widthSets the width of an outlinethin
medium
thick
lengthinherit
2