Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS Outline

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.

Example

#

An element with an outline.

An outlined element
<style>
  .outline {
    outline: 3px solid darksalmon;
    padding: 25px;
  }
</style>

<div class="outline">
  An outlined element
</div>

Using outline

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.

Box model with outline
<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.

Outline Shorthand Property

The outline property is a shorthand for setting three outline properties:

Solid lightblue outline.
Dashed indigo outline.
Dotted gray outline.
<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>


Outline Style

The outline-style property sets the style of the outline.

Only one style can be defined for all 4 sides of the element.

Values

#

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

Examples

#

Click the buttons to see the different outline-style values.

dotted outline
<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.


Outline Color

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.

outline-color: indigo
outline-color: teal
outline-color: red
<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> 

Outline Width

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)
  • A specific size (in px, pt, cm, em, etc)

Values

#

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.

Examples

#

Click the buttons to see the different outline-width values.

thin outline width
<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.


Outline Offset

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.

Outline-offset: 10px.
<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.


Did you know?

Did you know?

Outline versus border properties

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.


CSS Outline Properties

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

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides