CSS Outline

An outline is a line drawn outside the element’s border.

This element has a black border and a green outline with a width of 10px.
Try it Yourself »

CSS Outline

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

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the 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;}

Result:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Try it Yourself »

Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the outline-style property is set!

❮ Previous Next ❯

CSS Outline Width

❮ Previous Next ❯

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)

The following example shows some outlines with different widths:

A thin outline.

A medium outline.

A thick outline.

A 4px thick outline.

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

Try it Yourself »

❮ Previous Next ❯

CSS Outline Color

❮ Previous Next ❯

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)

The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:

A solid red outline.

A dotted blue outline.

An outset grey outline.

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

Try it Yourself »

HEX Values

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

Example

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

Try it Yourself »

RGB Values

Or by using RGB values:

Example

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

Try it Yourself »

HSL Values

You can also use HSL values:

Example

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

Try it Yourself »

You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.

❮ Previous Next ❯

CSS Outline Shorthand

❮ Previous Next ❯

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.

The following example shows some outlines specified with the shorthand outline property:

A dashed outline.

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.

Example

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

Try it Yourself »

❮ Previous Next ❯

CSS Outline Offset

❮ Previous Next ❯

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:

This paragraph has an outline 15px outside the border edge.

Example

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

Try it Yourself »

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

This paragraph has an outline of 15px outside the border edge.

Example

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

Try it Yourself »

Test Yourself With Exercises

Exercise:

Set a solid, 5px outline border for the <div> element.

<style>
div {
  : solid;
  : 5px;
}
</style>

<body>

<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>

</body>

Submit Answer »

Start the Exercise

All CSS Outline Properties

Property	Description
outline	A shorthand property for setting outline-width, outline-style, and outline-color in one 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

❮ Previous Next ❯