CSS Outline
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 height is 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 outline
The following example first sets a thin black border around each <p> element,
then it shows the different outline-style values:
Example
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:
- name - specify a color name, like "red"
- RGB - specify a RGB value, like "rgb(255,0,0)"
- Hex - specify a hex value, like "#ff0000"
- invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)
Example
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.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-color
Example
border: 1px solid black;
outline: 5px dotted red;
}
Result:
An outline.
Test Yourself with Exercises!
Exercise 1 » Exercise 2 » Exercise 3 »
All CSS Outline Properties
| 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 |
