An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

CSS has the following outline properties:

outline-style

outline-color

outline-width

outline-offset

outline

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

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

The following example shows the different outline-style values:

EXAMPLE:

Demonstration of the different outline styles:

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;}

CSS Outline Width

The outline-width property specifies the width of the outline, and can have one of the following values:

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

EXAMPLE:

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;
}

CSS Outline Color

The outline-color property is used to set the color of the outline.

The color can be set by:

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 - performs a color inversion (which ensures that the outline is visible, regardless of color background)

EXAMPLE:

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;
}

HEX Values

The outline color can also be specified using a hexadecimal value (HEX):

EXAMPLE:

p.ex1 {
outline-style: solid;
outline-color: #ff0000; /* red */
}

RGB Values

Or by using RGB values:

EXAMPLE:

p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}

HSL Values

You can also use HSL values:

EXAMPLE:

p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}

Invert Color

The following example uses outline-color: invert, which performs a color inversion. This ensures that the outline is visible, regardless of color background.

EXAMPLE:

p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}

CSS Outline - Shorthand property

The outline property is a shorthand property for setting the following individual outline properties:

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

The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.

EXAMPLE:

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

CSS Outline Offset

The outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

The following example specifies an outline 15px outside the border edge:

EXAMPLE:

p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

The following example shows that the space between an element and its outline is transparent:

EXAMPLE:

p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}