Outline
A line created outside an element’s border is called an outline.
CSS Outline
A line that is drawn OUTSIDE the edges of an element to make it “stand out” is called an outline.
BOX MUKAVU
CSS has the following outline properties:
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
Note: borders are not the same as outline! In contrast to border, which is created inside the element’s border, outline may cross over into other content. Furthermore, the width of the outline has no bearing on the element’s overall width or height; it is not a component of the element’s measurements.
CSS Outline Style
One of the following values may be assigned to the outline-style property, which defines the outline’s style:
- 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
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.
It should be noted that until the outline-style parameter is set, none of the other outline properties—which you will discover more about in the upcoming chapters—will have ANY effect!
