The outline
property displays a line outside an HTML element.
The purpose of an outline is to draw attention to the element.
An outline is like a border that exists outside the element.
Outlines do not add to the element's size.
An element with an outline.
<style>
.outline {
outline: 3px solid darksalmon;
padding: 25px;
}
</style>
<div class="outline">
An outlined element
</div>
Outlines are used for accessibility and to make an element stand out.
Unlike borders, outlines cannot be specified for different sides of the element.
Outlines are not part of the CSS box model.
They are outside the elements and overlap with adjacent elements.
This example shows that the outline lies outside the border (i.e. outside the box model), and overlaps the element's margin.
<style>
.box-model {
outline: 20px solid lightsalmon;
margin: 40px;
border: 20px solid aliceblue;
padding: 20px;
}
</style>
<div class="box-model">
Box model with outline
</div>
For details on the outline
, see our CSS outline Property Reference.
The outline property is a shorthand for setting three outline properties:
<div style="outline: 3px solid lightblue; padding: 25px;">
Solid lightblue outline.
</div>
<div style="outline: dashed indigo; padding: 25px;">
Dashed indigo outline.
</div>
<div style="outline: dotted gray; padding: 25px;">
Dotted gray outline.
</div>
The outline-style property sets the style of the outline.
Only one style can be defined for all 4 sides of the element.
Style | Description |
---|---|
dotted |
Defines a dotted outline |
dashed |
Defines a dashed outline |
solid |
Defines a solid outline |
double |
Defines a double outline |
groove |
Defines a 3D grooved outline |
ridge |
Defines a 3D ridged outline |
inset |
Defines a 3D inset outline |
outset |
Defines a 3D outset outline |
Click the buttons to see the different outline-style
values.
<style>
.outline-style {
outline-style: dotted;
padding: 25px;
outline-color: #302ea3;
}
</style>
<div class="outline-style">dotted outline</div>
For details on the outline-style
, see our CSS outline-style Property Reference.
The outline-color property sets the outline color.
If the outline-color
is not set, it will inherit the color of the element.
Three elements with different outline colors and styles.
<style>
.outline-indigo {
outline-style: dotted;
outline-color: #302ea3;
padding: 20px;
}
.outline-teal {
outline-style: double;
outline-color: #12474a;
padding: 20px;
}
.outline-red {
outline-style: outset;
outline-color: #7f1d1d;
padding: 20px;
}
</style>
<div class="outline-indigo">outline-color: indigo</div>
<div class="outline-teal">outline-color: teal</div>
<div class="outline-red">outline-color: red</div>
The outline-width property sets the width or thickness of the outline.
The outline-width
property can have any of the following values:
thin
(typically 1px)medium
(typically 3px)thick
(typically 5px)Value | Description |
---|---|
thin |
Thin outline |
medium |
Default. Medium outline |
thick |
Thick outline |
length |
Sets outline thickness using CSS units |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
Click the buttons to see the different outline-width
values.
<style>
.outline-width-example {
outline-style: solid;
outline-width: thin;
padding: 15px;
}
</style>
<div class="outline-width-example">
thin outline width
</div>
For details on outline-width
, see our CSS outline-width Property Reference.
The outline-offset property adds space between the outline and border.
The added space is transparent.
A space is added between the element border and outline.
<style>
.outline-offset {
outline: 5px solid darksalmon;
outline-offset: 15px;
border: 5px solid lightblue;
padding: 20px;
}
</style>
<div class="outline-offset">
Outline-offset: 10px.
</div>
For details on outline-offset
, see our CSS outline-offset Property Reference.
Both outline and border draw a line and use the same CSS syntax.
Outlines are drawn outside the element.
Borders are drawn inside the element.
Outlines are not included in the element's size calculations.
Borders are included in the element's size calculations.
Borders are customizable for each side of the element, whereas outlines cannot.
The table below are the properties used for outline.
Property | Description |
---|---|
outline | A shorthand property for setting outline-width, outline-style, and outline-color in a single declaration |
outline-color | Sets the color of an outline |
outline-offset | Specifies the space between an outline and the edge or border of an element |
outline-style | Sets the style of an outline |
outline-width | Sets the width of an outline |