CSS Outline

❮ Previous Next ❯

An outline is a line that goes around the outside of an element's border.

This item has a black line around it and a green border that's 10 pixels in width.

CSS Outline

An outline is like a border, but it goes on the outside of an element to make it look more noticeable.

CSS offers various properties that control how the outline of an element is displayed.

outline-style
outline-color
outline-width
outline-offset
outline

Note: An outline is not the same as borders. Unlike borders, outlines are drawn outside the element's border and can cover other content. Furthermore, the outline doesn't count as part of the element's size. It doesn't change the element's width or height.

CSS Outline Style

The outline-style property tells us how the outline should look. It can be set to one of these options:

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
none - Defines no outline
hidden - Defines a hidden outline

In this example, we demonstrate various styles for outlines using the outline-style attribute.

CSS Outline Width

The "outline-width" property tells us how wide an outline should be. It can be set to one of these values:

thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)

A thin outline.

A medium outline.

A thick outline.

A 4px thick outline.

CSS Outline Color

The outline-color property is used to choose the color for the outline.

You can choose the color using:

name - specify a color name, like "red"
HEX - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
"invert" - changes colors so outlines are always seen, no matter the background color.

The example below displays various outlines in different colors. Additionally, observe that these elements contain a slender black border within the outline:

A solid red outline.

A dotted blue outline.

An outset grey outline.

CSS Outline - Shorthand property

The outline property is a quick way to set various outline properties all at once.

outline-width
outline-style (required)
outline-color

The outline property can be set using one, two, or three values from the provided options. The sequence in which you specify these values doesn't affect the outcome.

In this example, you can see various outlines set using the outline property, using shorthand notation.

A dashed outline.

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        outline-color: red;
      }

      p.dotted {
        outline-style: dotted;
      }

      p.dashed {
        outline-style: dashed;
      }

      p.solid {
        outline-style: solid;
      }

      p.double {
        outline-style: double;
      }

      p.groove {
        outline-style: groove;
      }

      p.ridge {
        outline-style: ridge;
      }

      p.inset {
        outline-style: inset;
      }

      p.outset {
        outline-style: outset;
      }
    </style>
  </head>
  <body>
    <h2>The outline-style Property</h2>
    <p class="dotted">A dotted outline</p>
    <p class="dashed">A dashed outline</p>
    <p class="solid">A solid outline</p>
    <p class="double">A double outline</p>
    <p class="groove">A groove outline. The effect depends on the outline-color value.</p>
    <p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
    <p class="inset">An inset outline. The effect depends on the outline-color value.</p>
    <p class="outset">An outset outline. The effect depends on the outline-color value.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.ex1 {
        border: 1px solid black;
        outline-style: solid;
        outline-color: red;
        outline-width: thin;
      }

      p.ex2 {
        border: 1px solid black;
        outline-style: solid;
        outline-color: red;
        outline-width: medium;
      }

      p.ex3 {
        border: 1px solid black;
        outline-style: solid;
        outline-color: red;
        outline-width: thick;
      }

      p.ex4 {
        border: 1px solid black;
        outline-style: solid;
        outline-color: red;
        outline-width: 4px;
      }
    </style>
  </head>
  <body>
    <h2>The outline-width Property</h2>
    <p class="ex1">A thin outline.</p>
    <p class="ex2">A medium outline.</p>
    <p class="ex3">A thick outline.</p>
    <p class="ex4">A 4px thick outline.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.ex1 {
        border: 2px solid black;
        outline-style: solid;
        outline-color: red;
      }

      p.ex2 {
        border: 2px solid black;
        outline-style: dotted;
        outline-color: blue;
      }

      p.ex3 {
        border: 2px solid black;
        outline-style: outset;
        outline-color: grey;
      }
    </style>
  </head>
  <body>
    <h2>The outline-color Property</h2>
    <p>The outline-color property is used to set the color of the outline.</p>
    <p class="ex1">A solid red outline.</p>
    <p class="ex2">A dotted blue outline.</p>
    <p class="ex3">An outset grey outline.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.ex1 {
        outline: dashed;
      }

      p.ex2 {
        outline: dotted red;
      }

      p.ex3 {
        outline: 5px solid yellow;
      }

      p.ex4 {
        outline: thick ridge pink;
      }
    </style>
  </head>
  <body>
    <h2>The outline Property</h2>
    <p class="ex1">Dashed outline.</p>
    <p class="ex2">Dotted red outline.</p>
    <p class="ex3">5px solid yellow outline.</p>
    <p class="ex4">Thick ridge pink outline.</p>
  </body>
</html>

❮ Previous Next ❯

CSS Basics

CSS Properties

CSS Responsive

CSS Grid

CSS Outline

CSS Outline

CSS Outline Style

CSS Outline Width

CSS Outline Color

CSS Outline - Shorthand property

Web Development