Menu Samaritan's Purse

OUTLINE

The outline property is shorthand for outline-color, outline-style, and outline-width.

SYNTAX

CSS

outline: value;

JS

object.style.outline = "value";

VALUES

<'outline'> = [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
<'outline-color'> = <color> | invert
<color>

Specifies the color using a keyword or a numerical specification.

invert

Performs a color inversion on the pixels on the screen.

<'outline-style'> = auto | <outline-line-style>
auto

Automatically specified by the user agent.

<outline-line-style> = <line-style>
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
dashed

A dashed line. A series of square-ended dashes.

dotted

A dotted line. A series of round dots.

double

A double line. Two parallel solid lines with some space between them.

groove

A grooved line. Looks as if it were carved in the canvas.

hidden

A hidden line. Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables.

inset

An inset line. Looks as if the content on the inside of the border is sunken into the canvas.

none

No line.

outset

An outset line. Looks as if the content on the inside of the border is coming out of the canvas.

ridge

A ridged line. Looks as if it were coming out of the canvas.

solid

A single line.

<'outline-width'> = <line-width>
<line-width> = <length [0,∞]> | thin | medium | thick
<length>

Specifies the length using a number followed by a unit of measurement.

thin

A thin line.

medium

A medium line.

thick

A thick line.

EXAMPLES

COLOR | COLOR

COLOR | INVERT

STYLE | AUTO

STYLE | DASHED

STYLE | DOTTED

STYLE | DOUBLE

STYLE | GROOVE

STYLE | HIDDEN

STYLE | INSET

STYLE | NONE

STYLE | OUTSET

STYLE | RIDGE

STYLE | SOLID

WIDTH | LENGTH

WIDTH | MEDIUM

WIDTH | THICK

WIDTH | THIN

JS

INTERNAL

outline-color

outline-style

outline-width

EXTERNAL

World Wide Web Consortium (W3C)