Loading lesson path
Overview
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". This element has a black border and a green outline with a width of 5px.
! 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 has the following outline properties:
Formula
outline - style
- Specifies the style of the outline outline - color
- Specifies the color of the outline outline - width
- Specifies the width of the outline outline - offset
- Adds space between the outline and the edge/border of an element outlineFormula
The outline - style property specifies the style of the outline, and 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 ridge - Defines a 3D ridged outline inset - Defines a 3D inset outline outset - Defines a 3D outset outline none - Defines no outline hidden - Defines a hidden outline
Formula
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;}A dotted outline. A dashed outline. A solid outline. A double outline.
Formula
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.None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the outline-style property is set!