An outline is a line that is drawn around elements, outside the borders. Outlines never take up space, as they are drawn outside of an element’s content.
- outline-color
- outline-style
- outline-width
- outline
outline-style–
This property is used to specify the style of an outline. We can set this property to none (default), hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
Ex: –
div { outline-style: solid;}
outline-color–
This property is used to specify the color of an outline. We can set this property to invert (default) or color.
Ex: –
div { outline-style: solid; outline-color: red;}
outline-width–
This property is used to specify width of an outline. We can set this property to medium (default), thin, thick, length.
Ex: –
div { outline-style: solid; outline-width: thin;}
div { outline-style: solid; outline-width: 5px;}
outline–
This is shorthand of other outline properties.
Syntax: –
Selector {outline: outline-color outline-style outline-width;}
Ex: –
div { outline: red solid 3px;}
