logo

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.

Example


outline:1px solid red;

outline:5px dotted green;

outline:10px dashed black;
Try </>

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.

Example

outline-width:thin


outline-width:medium


outline-width:thick


outline-width:10px


Try </>

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.

Example

outline-style:dotted;  dotted value defines outline that consists of doots.


outline-style:dashed;  dashed value represents outline that is collection of dashes.


outline-style:solid;  solid value defines a solid outline.


outline-style:double;  double defines double outline outside the border.


outline-style:groove;  It looks as if the content is coming into the canvas for the groove property.


outline-style:ridge;  It looks as if the content is coming out of the canvas.


outline-style:inset  inset styles a box in such a way that the colors of outline-top and outline-left are darker than the other outline sides.


outline-style:outset; outset styles a box in such a way that the colors of outline-bottom and outline-right are darker than the other outline sides.


Try </>

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.

Example

outline-color:red;


outline-color:rgb(0,255,0);


Try </>

rgb means red, green and blue.

outline - A shorthand property

All of the above three properties can be combined into one outline property.

Example

<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?