Flash cards
Review the key moves
What is the main idea behind CSS Outline?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
p.___ {outline-style: dotted;}Put the learning moves in the order that makes the concept easiest to apply.
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.
Note
Outline differs from borders ! 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
- 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
- outline - A shorthand property
CSS The outline-style Property
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
The following example shows the different outline-style values:
Example
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;}Live preview
Expected output
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.
Note
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!