CSS Outline Tutorial with Examples

CSS Outline
CSS outline-style
CSS outline-width
CSS outline-color
CSS outline-offset

1. CSS Outline

CSS Outline creates something almost like a border. It is drawn around the element and outside the border. It helps the element stand out.

Different from border, Outline does not occupy space around an element. According to the specification, Outline is not a rectangle even though you always feel that it is like a rectangle.

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Example:

Outline is drawn around an element, and outside a border, it does not take up space around an element, therefore, if Outline has a large width it can overlap other contents outside the element. . See the following example:

Some content 1
<div style="border: 3px solid gray; outline: AliceBlue solid 10px;padding:10px;">
    border: 3px solid gray; <br/>
    outline: AliceBlue  solid 10px;
</div>
Some content 2

Syntax of CSS Outline:

/* Syntax:  */
outline: color  style width;
/* style: required */

Or:

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

2. CSS outline-style

CSS outline-style is used to specify the style of the Outline and can have one of the following values:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

The values such as groove, ridge, inset, outset create a 3D Outline surrounding an element. the 3D effect depends on the value of CSS outline-color.

In the following example, I set the CSS outline-width value to 10px, a value which is big enough to help you easily see the difference of different Outline-styles.

outline-style-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-color: green;
           outline-width: 10px;
           margin: 30px 5px;
         }
         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>
      <h3>CSS outline-style</h3>

      <p class="dotted">
          dotted - A series of round dots.
      </p>
      <p class="dashed">
        dashed - A series of square-ended dashes.
      </p>
      <p class="solid">
         solid - A single line segment.
      </p>
      <p class="double">
        double - Two parallel solid lines with some space between them.
        When using this value, the border-width value determines the
        sum of the lines and the space between them.
      </p>
      <p class="groove">
          groove - Looks as if it were carved in the canvas.
      </p>
      <p class="ridge">ridge - Looks as if it were coming out of the canvas.</p>
      <p class="inset">
        inset - Looks as if the content on the inside of the border is sunken into the canvas.
        Treated as ridge in the collapsing border model.
      </p>
      <p class="outset">
        outset - Looks as if the content on the inside of the border is coming out of the canvas.
        Treated as groove in the collapsing border model.
      </p>
   </body>
</html>

none vs hidden

CSS outline-style:none and CSS outline-style:hidden are the same, which makes the element have no Outline.

3. CSS outline-width

CSS outline-width specifies Outline width. It can receive one of the following values:

thin	Specifically 1px.
medium	Specifically 3px.
thick	Specifically 5px.
px, pt, cm, em,...	A specific number, such as 1px, 1pt, 2cm, 2em,...

outline-width-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: outset;
           outline-color: green;
           margin: 30px 5px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-width</h3>
      <p style="outline-width:1px">
          outline-width:1px
      </p>
      <p style="outline-width:5px">
        outline-width:5px
      </p>
      <p style="outline-width:10px">
         outline-width:10px
      </p>
   </body>
</html>

4. CSS outline-color

CSS outline-color Used to set up color for Outline. Its values may be:

name	Color name, for example, red, blue, green,..
RGB	A RGB value, for example, rgb(255,10,20).
Hex	A Hex value, for example, #ff0000.
invert	The browser automatically provides a consistent color, ensuring that it is visible (Do not be confused with any background color around the element).

Example:

outline-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: inset;
           outline-width: 10px;
           margin: 30px 15px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-color</h3>
      <p style="outline-color:yellow">
          outline-color:yellow;
      </p>
      <p style="outline-color:blue">
        outline-color:blue;
      </p>
      <p style="outline-color:green">
         outline-color:green;
      </p>
   </body>
</html>

5. CSS outline-offset

CSS outline-offset is used to create distance between Outline and element borders.

Its values can be:

A specific value, for example, 1px, 2em, 3cm,...
initial
inherit

The default value of outline-offset is 0, which means that the Outline is by default drawn close to element border.

outline-offset-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Outline</title>
    <meta charset="UTF-8"/>
    <style>
       .my-div {
          border: 3px solid gray;
          outline: green dotted 10px;
          padding:10px;
          margin: 25px;
          outline-offset: 10px;
       }
    </style>
</head>
<body>
    <h3>CSS outline-offset</h3>
    <div class ="my-div">
        border: 3px solid gray; <br/>
        outline: green dotted 10px; <br/>
        padding:10px; <br/>
        margin: 40px; <br/>
        outline-offset: 10px;
    </div>
</body>
</html>