CSS Outline Property (With Examples)

CSS Outline Property

In this tutorial, you will learn about CSS outline with the help of examples.

The CSS outline property is used to draw a line outside the border of an element. For example,

h1 {
    border: 10px solid black;
    outline: 10px solid orange;
}

Browser Output

CSS Outline Example

Here, the outline property adds a 10px solid orange line outside the border of the h1 element.

The outline property has the following related properties:

  • outline-style: specifies the styles of the outline
  • outline-width: specifies the outline width
  • outline-color: specifies the outline color
  • outline: shorthand property to specify the outline-style, outline-width, and outline-color together

We will look into each of them briefly.

CSS outline-style Property

The outline-style property is used to specify the style of the element's outline.

The possible values for the outline-style properties are as follows:

  • solid: creates an outline with a single solid line
  • dotted: creates an outline with a series of dots
  • dashed: creates an outline with a series of dashes
  • double: creates an outline with two parallel lines
  • groove: creates an outline with a carved-in 3D effect
  • ridge: creates an outline with a raised 3D effect
  • inset: creates an outline with a pushed-in 3D effect
  • outset: creates an outline with a popped-out 3D effect
  • none: no outline is displayed
  • hidden: the outline is hidden

Let's see an example,

HTML
CSS
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS outline-style</title>
    </head>

    <body>
        <p class="solid">outline-style: solid;</p>
        <p class="dotted">outline-style: dotted;</p>
        <p class="dashed">outline-style: dashed;</p>
        <p class="none">outline-style: none;</p>
        <p class="hidden">outline-style: hidden;</p>
    </body>

</html>
/* creates a solid outline */
p.solid {
    outline-style: solid;
}

/* creates a dotted outline */
p.dotted {
    outline-style: dotted;
}

/* creates a dashed outline */
p.dashed {
    outline-style: dashed;
}

/* no outline is created */
p.none {
    outline-style: none;
}

/* hides the outline */
p.hidden {
    outline-style: hidden;
}

/* adds 8px padding to all p */
p {
    padding: 8px;
}

Browser Output

CSS Outline Different Values Example

The above example shows the output of different values of the outline-style property.

Note: The difference between outline-style: none and outline-style: hidden is that none removes the outline completely while hidden hides the outline but still takes up space.

The outline-style: hidden is more recommended as it also preserves the focus on the elements and enhances accessibility.

CSS outline-width Property

The outline-width property is used to specify the width of an outline.

The outline-width property value can be specified in length units such as px, pt, etc, or one of the keywords - thin, medium, and thick.

Let's see an example,

HTML
CSS
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS outline-width</title>
    </head>

    <body>
        <p class="first">outline-width: 4px;</p>
        <p class="second">outline-width: 8px;</p>
    </body>

</html>
p {
    padding: 8px;
    outline-style: solid;
}

p.first {
    outline-width: 4px;
}

p.second {
    outline-width: 8px;
}

Browser Output

CSS Outline Width Example

Note: We need to specify the outline-style property for all other outline-related properties to work.

CSS outline-color Property

The outline-color property is used to specify the color of the element's outline.

The value of the outline-color property can be specified in any color format, such as color names, HEX, HSL, and RGB.

Let's see an example,

HTML
CSS
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS outline-color</title>
    </head>

    <body>
        <p class="first">outline-color: blue;</p>
        <p class="second">outline-color: orange;</p>
    </body>

</html>
p {
    outline-style: solid;
    outline-width: 8px;
    padding: 8px;
}

p.first {
    outline-color: blue;
}

p.second {
    outline-color: orange;
}

Browser Output

CSS Outline Color Example

CSS outline Shorthand Property

The outline shorthand property is used to specify the outline-style, outline-width, and outline-color properties in a single declaration.

The syntax of the shorthand outline property is as follows:

outline: outline-width outline-style outline-color inherit;

Let's see an example,

HTML
CSS
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS outline</title>
    </head>

    <body>
        <p>
            This paragraph has a solid outline of 10px width and having orange
            color.
        </p>
    </body>

</html>
p {
    outline: 10px solid orange;
    padding: 8px;
}

Browser Output

CSS Outline Shorthand Example

In the above example, 

outline: 10px solid orange;

is equivalent to,

outline-style: solid;
outline-width: 10px;
outline-color: orange;

The outline shorthand property requires at least outline-style value to work.

Note:

  • The outline property is different from the border property even though it takes the same properties as a border and generates a similar output.
  • The outline property doesn't have properties to provide an outline to the individual sides of an element, unlike the border property.

    For example, we can provide the border to each side as border-top, border-right, etc but we can't provide an outline to each side as outline-top or outline-right.
  • The outline property is not a part of the box model, unlike the border property. So, the width of the outline doesn't affect the size (width or height) of an element.

Table of Contents