CSS Outline

An outline is a line drawn outside the border of an element. It looks like a border, but it has important differences.

Point	Border	Outline
Takes space in the layout	Yes	No. It is drawn over the neighbours
Different on each side	Yes	No, always on all sides
Follows border-radius	Yes	Yes in modern browsers

.box {
  outline: 3px solid orange;
  outline-offset: 6px;    /* gap between the border and the outline */
}

Output in the browser

Box with a border, a gap and an outline

Outline and focus

Browsers show an outline around a link or form field when you reach it with the keyboard (focus). It helps people who do not use a mouse.

input:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

Note: Do not write outline: none without giving another visible focus style. It makes your site hard to use with a keyboard.

Congratulations! Chapter Finished. Learn more about the similar topics:

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.