outline property defines the line outside the border (if border is present otherwise around the text). It has the same properties as border.
outline:1px solid red;
outline:5px dotted green;
outline:10px dashed black;
It is a shorthand property of outline-width, outline-style, and outline-color properties.
outline width defines the thickness of the outline. The value may be in px, em.
In the above example, the border color is blue. And the outline color is red. The above example represents different values for the outline-width.
outline-style property defines the style of the border property. There are many styles for the outline.
In the above example, the border color is red. The outline color is black. The outline has different styles.
It defines the color of the outline. The value of the outline may be a keyword such as red, green, blue etc. The value of the outline color may also be in rgb or hexadecimal.
rgb means red, green and blue.
outline - A shorthand property
All of the above three properties can be combined into one outline property.
<div style="outline:outline-width outline-style outline-color"></div> <div style="outline:5px groove gray;"></div>Try </>
In the above example, 5px is the outline-width, groove is the outline-style and gray is the outline-color.
Was this article helpful?