CSS outline is just like CSS border property. It facilitates you to draw an extra border around an element to get visual attention.
CSS has the following outline properties:
The outline-style property specifies the style of the outline, and can have one of the following values:
none: No border. (Equivalent of outline-width:0;)
solid: Outline is a single solid line.
dotted: Outline is a series of dots.
dashed: Outline is a series of short lines.
double: Outline is two solid lines.
groove: Outline looks as though it is carved into the page.
ridge: Outline looks the opposite of groove.
inset: Outline makes the box look like it is embedded in the page.
outset: Outline makes the box look like it is coming out of the canvas.
hidden: Same as none.
The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
The outline-width property specifies the width of the outline, and can have one of the following values:
The outline property is a shorthand property for setting the following individual outline properties:
outline property is specified as one,
two, or three values from the list above. The order of the values does not
The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.