CSS Outline


An outline is a line drawn around an element, located on the periphery of the border edge, and it can play a role in highlighting the element.

The outline attribute specifies the style, color, and width of the element outline.


CSS Outline Examples

Draw a line around the element

This example demonstrates the use of the outline property draw a line around the element.

Set the style of the outline

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

Set the color of the outline

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

Set the width of the outline

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


CSS Outline

An outline is a line drawn around an element, located on the periphery of the border edge, and can play a role in highlighting the element.

The CSS outline property specifies the style, color, and width of the element outline.

Outline


CSS Outline Properties

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

PropertyDescriptionValueCSS
outlineSet all contour properties in one statementoutline-color
outline-style
outline-width
inherit
2
outline-colorSet the color of the outlinecolor-name
hex-number
rgb-number
invert
inherit
2
outline-styleSet the style of the outlinenone
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-widthSet the width of the outlinethin
medium
thick
length
inherit
2