CSS Outline

In CSS, the outline property is used to set the style, color, and width of an outline around an element. The outline is drawn outside the border of an element and does not affect the layout of the document. It is often used to highlight elements or provide focus, especially in form controls and interactive elements.

This element has a 2px black border and a pink outline with a width of 10px.

CSS Outline

CSS has the following outline properties:

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

CSS Outline Style

The outline-style property in CSS is used to set the style of an outline around an element. The outline is a visual property that is drawn outside the border of an element and is typically used to highlight or emphasize the element. The outline-style property can take various values to define the appearance of the outline. Here are some common values for outline-style

none:This value removes the outline altogether.
dotted:The outline is a series of dots.
dashed:The outline is a series of dashes.
solid:The outline is a solid line.
double:The outline is a double line.
groove:The outline looks like a carved groove.
ridge:The outline looks like a ridge.
inset:The outline looks like it is embedded into the page.
outset:The outline looks like it is coming out of the page.
hidden:Defines a hidden outline

Example

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

You can click on above box to edit the code and run again.

Output

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.

CSS Outline Width

In CSS, the outline-width property is used to set the width of the outline around an element. The outline is a visual property that is drawn outside the border of an element, and the outline-width property allows you to control how thick or thin the outline should be. The value of outline-width can be specified in various units, such as pixels (px), ems (em), or percentages (%).

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

You can click on above box to edit the code and run again.

Output

A thin outline.

A medium outline.

A thick outline.

A 4px thick outline.

CSS Outline Color

In CSS, the outline-color property is used to set the color of the outline around an element. The outline is a visual property that is drawn outside the border of an element, and the outline-color property allows you to specify the color of this outline. You can use various color values, including named colors, hexadecimal values, RGB values, or HSL values.

Example

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: pink;
}

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

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: gray;
}

You can click on above box to edit the code and run again.

Output

A solid pink outline.

A dotted blue outline.

An outset grey outline.

HEX Values

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

Example

  p{
  border:  2px solid black;
  outline-style:  solid;
  outline-color:  #ffc0cb;
}

You can click on above box to edit the code and run again.

Output

CSS Outline Shorthand

The outline property in CSS is a shorthand property that allows you to set the style, color, and width of an outline around an element in a single declaration. The general syntax for the outline shorthand property is as follows:

Example

p.{outline: dashed;}outline: dotted orange;}outline: 5px solid blue;}outline: thick ridge pink;}

You can click on above box to edit the code and run again.

Output

A dashed outline.

A dotted orange outline.

A 5px solid blue outline.

A thick ridge pink outline.

CSS Outline Offset

The outline-offset property in CSS is used to set the space between an element's outline and its border. It defines the space or gap between the outline and the edge of the element, allowing you to control the visual separation between the outline and the border.

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

Example

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

You can click on above box to edit the code and run again.

Output

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

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

Example

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

You can click on above box to edit the code and run again.

Output

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