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