Outline

Learn the outline, the line outside the border.

What is outline?

outline is a second line drawn outside the border. Like border it takes width, style and color but it does not affect layout: page flow and box measurements stay the same.

Its most common use is the focus state. When a button is clicked or selected with the keyboard the browser draws a default outline; that line matters for accessibility and should stay visible.

Gap with outline-offset

outline-offset puts space between the outline and the border. A positive value pushes the outline outward; outline-offset: 4px moves the line 4 pixels away from the border.

This helps when you do not want the focus line glued to the border. A negative value is also allowed; the outline then overlaps the border, though this is rarely used.

Exercise Add a focus line to the button

Write a declaration block for the .btn:focus selector. Add the outline: 2px solid #3366cc declaration. This shows a blue line around the button when it is selected with the keyboard.

Show example solution

/* focus line */
.btn:focus {
  outline: 2px solid #3366cc;
}

Test yourself

What is the key difference between outline and border?
- outline is thick, border is thin
- outline does not affect layout, border does
- outline is drawn at corners, border at edges
- outline goes inside margin, border inside padding
Show answer

outline does not affect layout, border does — Correct. outline does not change box measurements; border does.

Write the focus line property

.btn:focus {
  ____: 2px solid #3366cc;
}

Show answer

.btn:focus {
  outline: 2px solid #3366cc;
}

Match the outline properties

outline

Line outside the border
outline-offset

Gap between line and border
outline: none

Removes the line

Next lesson: Summary - Button styles

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies