HTML & CSS
/Intermediate
Outline vs Border
Definition
An `outline` is a line drawn outside the element's border edge to make the element stand out. Unlike borders, outlines do not take up space in the document flow.
Explain Like I'm New
A Border is part of the physical Box Model. If you add a 10px border to a box, the box becomes 10px wider, pushing other elements away. An Outline is drawn *on top* of the screen, completely ignoring physics. Adding a 10px outline doesn't move any surrounding elements.
Real World Example
When you use the 'Tab' key to navigate a webpage, the browser draws a blue ring around the focused button. That is an `outline`. If it were a `border`, the button would physically grow in size when focused, causing the whole webpage to jiggle.
Common Use Cases
- •Accessibility focus rings
- •Debugging layouts (because it doesn't break the layout)
Interactive Example
Interview Questions
basic
- Does an `outline` affect the width or height of an element?
intermediate
- Can you apply an outline to just one side of an element (like `border-bottom`)?