CSS Outline

In this tutorial we will learn about CSS outline.

In the above image the area colored in gray is the outline for the content highlighted in blue.

outline

Outline is a line drawn around an element's border. This is used to highlight the element.

Note! outline is not a part of the element and in no way affects the width and height of the element.

We use the outline property to set the outline of an element.

outline-style

We use the outline-style property for outline style.

Always set the outline-style property before setting other properties related to outline. Otherwise, it will not show up.

This property can be assigned one of the following values.

• none - if we don't want the outline
• hidden - for hidden outline
• solid - for a solid outline
• double - for a double outline
• dotted - for dotted outline
• dashed - for dashed outline

The following values for the outline-style property will depend on the value of the outline-color property.

• groove
• inset
• outset
• ridge
• groove

In the following example we have set the style of the outline to solid.

p {
	outline-style : solid;
}

In the following example we have set the style of the outline for the button to none.

button {
	outline-style : none;
}

In the following example we have set the style of the outline for the button to dashed.

button {
	outline-style : dashed;
}

outline-width

We use the outline-width property to style width of the outline.

The value of this property can be in px, mm, cm etc. or in predefined thin, medium and thick value.

In the following example we have set the width of the outline to 2px.

p {
	outline-style : dashed;
	outline-width : 2px;
}

In the following example we have set the width of the outline to thick.

p {
	outline-style : dashed;
	outline-width : thick;
}

outline-color

We use the outline-color property to style color of the outline.

The value of this property can be set in the following ways

• color name like green
• RGB value like rgb(100,100,100)
• Hex value like #333

Click here to check out CSS Color tutorial.

Click here to check out Color Mixer.

In the following example we have set the color of the outline to salmon.

p {
	outline-style : dotted;
	outline-color : salmon;
}

Outline - shorthand

We can combine the three outline properties by simply using the outline property for the element.

We combine the property in the following order.

• outline-width
• outline-style
• outline-color

In the following example we have set the outline width to 2px, style to dashed and color to salmon.

p {
	outline : 2px dashed salmon;
}