CSS outline
outline property defines the line outside the border (if border is present otherwise around the text). It has the same properties as border.
<div style="width:100%; float:left; height:auto;">
<div style="width:250px; float:left;"><div style="width:100px; height:100px; outline:1px solid red; border:5px solid blue;"></div><br>outline:1px solid red;</div>
<div style="width:250px; float:left;"><div style="width:100px; height:100px; outline:5px dotted green; border:5px solid blue;"></div><br>outline:5px dotted green;</div>
<div style="width:250px; float:left;"><div style="width:100px; height:100px; outline:10px dashed black; border:5px solid blue;"></div><br>outline:10px dashed black;</div>
</div>
It is a shorthand property of outline-width, outline-style, and outline-color properties.
outline-width
outline width defines the thickness of the outline. The value may be in px, em.
<div style="border:1px solid blue; outline:thin dotted red; font-size:20px;">outline-width:thin</div><br><br>
<div style="border:1px solid blue; outline:medium dotted red; font-size:20px;">outline-width:medium</div><br><br>
<div style="border:1px solid blue; outline:thick dotted red; font-size:20px;">outline-width:thick</div><br><br>
<div style="border:1px solid blue; outline:10px dotted red; font-size:20px;">outline-width:10px</div><br><br>
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
outline-style property defines the style of the border property. There are many styles for the outline.
<div style="width:100%; margin:auto;">
<div style="outline:4px dotted gray; border:2px solid red; font-size:18px;"><b>outline-style:dotted;</b> dotted value defines outline that consists of doots.</div><br><br>
<div style="outline:4px dashed gray; border:2px solid red; font-size:18px;"><b>outline-style:dashed;</b> dashed value represents outline that is collection of dashes.</div><br><br>
<div style="outline:8px solid gray; border:2px solid red; font-size:18px;"><b>outline-style:solid;</b> solid value defines a solid outline.</div><br><br>
<div style="outline:8px double gray; border:2px solid red; font-size:18px;"><b>outline-style:double;</b> double defines double outline outside the border.</div><br><br>
<div style="outline:8px groove gray; border:2px solid red; font-size:18px;"><b>outline-style:groove;</b> It looks as if the content is coming into the canvas for the groove property.</div><br><br>
<div style="outline:8px ridge gray; border:2px solid red; font-size:18px;"><b>outline-style:ridge;</b> It looks as if the content is coming out of the canvas.</div><br><br>
<div style="outline:8px inset gray; border:2px solid red; font-size:18px;"><b>outline-style:inset</b> inset styles a box in such a way that the colors of outline-top and outline-left are darker than the other outline sides.</div><br><br>
<div style="outline:8px outset gray; border:2px solid red; font-size:18px;"><b>outline-style:outset;</b> outset styles a box in such a way that the colors of outline-bottom and outline-right are darker than the other outline sides.</div><br><br>
</div>
In the above example, the border color is red. The outline color is black. The outline has different styles.
outline-color
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>
In the above example, 5px is the outline-width, groove is the outline-style and gray is the outline-color.