CSS Outline
The CSS 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.
This element has a thin black border and a double outline that is 10px wide and green.
Outline Style
The outline-style property specifies the style of the outline.
The outline-style property 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 outline. The effect depends on the outline-color valueridge - Defines a 3D ridged outline. The effect depends on the outline-color valueinset - Defines a 3D inset outline. The effect depends on the outline-color valueoutset - Defines a 3D outset outline. The effect depends on the outline-color valuenone - Defines no outlinehidden - Defines a hidden outlineThe following example first sets a thin black border around each <p> element, then it shows the different outline-style values:
p
{
border
: 1px solid black;
outline-color
: red;
}
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.
Note: None of the OTHER CSS outline properties described below will have ANY effect unless the
outline-style property is set!
Outline Color
The outline-color property is used to set the color of the outline.
The color can be set by:
p
{
border
: 1px solid black;
outline-style
: double;
outline-color: red;
}
Result:
A colored outline.
Outline Width
The 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.
Example
p {
border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
Result:
A thick outline.
A thinner outline.
Outline - Shorthand property
To shorten the code, it is also possible to specify all the individual outline properties in one property.
The outline property is a shorthand property for the following individual outline properties:
outline-widthoutline-style (required)outline-colorp {
border
: 1px solid black;
outline: 5px dotted red;
}
Result:
An outline.
| Property | Description |
|---|---|
| outline | Sets all the outline properties in one declaration |
| outline-color | Sets the color of an outline |
| outline-offset | Specifies the space between an outline and the edge or border of an element |
| outline-style | Sets the style of an outline |
| outline-width | Sets the width of an outline |