outline — CSS Technical Interview Questions & Answers

A border-like line drawn outside the border box.

outline

  • A border-like line drawn outside the border box.
  • outline is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { outline: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If outline is about space, draw the box.

Technical Interview Tip: outline: one rule on .card, then say what changed.

Code Examples for outline

outline — working example

.field:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Do not remove focus outlines without a visible :focus-visible style */
.button:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

outline draws outside the border box and does not affect layout; keep visible focus styles for a11y.

How to Explain outline to an Interviewer

What does outline do?

A CSS property that changes look/layout Write it in a rule and refresh