CSS
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 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.
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.
The following values for the outline-style property will depend on the value of the outline-color property.
In the following example we have set the style of the outline to solid.
p {
outline-style : solid;
}
Hello World
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;
}
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;
}
Hello World
In the following example we have set the width of the outline to thick.
p {
outline-style : dashed;
outline-width : thick;
}
Hello World
We use the outline-color
property to style color of the outline.
The value of this property can be set in the following ways
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;
}
Hello World
We can combine the three outline properties by simply using the outline
property for the element.
We combine the property in the following order.
In the following example we have set the outline width to 2px, style to dashed and color to salmon.
p {
outline : 2px dashed salmon;
}
Hello World
ADVERTISEMENT