outline properties specify the style, color, and width of an 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 heightis not affected by the width of the outline.
outline-style property specifies the style of the outline.
outline-style property can have one of the following values:
dotted- Defines a dotted outline
dashed- Defines a dashed outline
solid- Defines a solid outline
double- Defines a double outline
groove- Defines a 3D grooved outline. The effect depends on the outline-color value
ridge- Defines a 3D ridged outline. The effect depends on the outline-color value
inset- Defines a 3D inset outline. The effect depends on the outline-color value
outset- Defines a 3D outset outline. The effect depends on the outline-color value
none- Defines no outline
hidden- Defines a hidden outline
The following example first sets a thin black border around each <p> element, then it shows the different
Note: None of the OTHER CSS outline properties described below will have ANY effect unless the
outline-style property is set!
outline-color property is used to set the color of the outline.
The color can be set by:
outline-width property specifies the width of the outline.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
Outline - Shorthand property
To shorten the code, it is also possible to specify all the individual outline properties in one property.
outline property is a shorthand property for the following individual outline properties: