outline
The outline CSS 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
color | currentcolor
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
Links
Internal
External
© 2021 Osbo Design