🎓 A1Learner
🔍
0 of 54 lessons completed

CSS Outline

An outline is a line drawn around an element outside its border. It takes no space in the layout.

Add an outline to the box

Three properties set the style, width and colour of the line. The line sits outside the border of the box.

.box {
  outline-style: solid;
  outline-width: 3px;
  outline-color: red;
}

Use the outline shorthand

The outline property sets width, style and colour in one declaration. This example gives a dashed blue line.

#demo {
  outline: 2px dashed blue;
}

Move the outline outwards

The outline-offset property pushes the line away from the border. The box itself does not grow.

.box {
  outline-style: solid;
  outline-offset: 4px;
}

Example

h1 {
  outline-style: dotted;
  outline-width: 2px;
  outline-color: blue;
}
.box {
  outline: 3px solid red;
  outline-offset: 4px;
}
#demo {
  outline: 2px dashed green;
}
.intro {
  outline-style: solid;
  outline-width: 1px;
  outline-color: purple;
}

Key points

  • Use outline-style to set the pattern of the line.
  • Use outline-width to set the thickness of the line.
  • Use outline-color to set the colour of the line.
  • An outline cannot be set for one side only.
  • An outline sits outside the border and adds nothing to the size of the element.

In this example, the heading gets a dotted blue outline. The box gets a solid red outline from the shorthand. Its offset moves the line 4 pixels away from the border. The demo paragraph gets a dashed outline. The intro paragraph gets a thin solid outline.

Note

Browsers often draw an outline around the element that has focus.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What is true about an outline?