An outline is a line drawn outside the element’s border.
CSS Outline #
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.
CSS has the following outline properties:
outline-style
outline-color
outline-width
outline-offset
outline
Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.
#
CSS Outline Style #
The outline-style
property specifies the style of the outline, and can have one of the following values:
dotted
– Defines a dotted outlinedashed
– Defines a dashed outlinesolid
– Defines a solid outlinedouble
– Defines a double outlinegroove
– Defines a 3D grooved outlineridge
– Defines a 3D ridged outlineinset
– Defines a 3D inset outlineoutset
– Defines a 3D outset outlinenone
– Defines no outlinehidden
– Defines a hidden outline
The following example shows the different outline-style
values:
#
Demonstration of the different outline styles:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.