juniorCSS
Difference between outline and border?
Updated Apr 28, 2026
Short answer
Borders take up space in the box model and trigger layout reflows, while outlines are drawn outside the border edge and do not take up space.
Deep explanation
An outline overlaps surrounding content rather than pushing it away. Furthermore, outlines cannot have specific sides styled differently (e.g., no outline-top), whereas borders can.
Real-world example
Applying a focus ring to an interactive element without causing the surrounding text or layout to shift by 2 pixels.
Common mistakes
- Using `border` for focus states and causing the UI to jiggle when an input is clicked.
Follow-up questions
- What is outline-offset?