border vs outline
border is part of the box model and enlarges the element, while outline draws a ring outside it, with no effect on the page layout or size.
Side-by-side comparison
#Affects the element’s size
Can be styled on each side separately
Rounding via border-radius
Offsetting from the element
Default use by the browser
Typical use
Example
#.card {
border: 2px solid #3f3f46;
}
.card:focus-visible {
outline: 3px solid #a78bfa;
outline-offset: 3px;
}<div class="stage">
<button class="card" type="button" style="padding: 10px 16px; border-radius: 10px; background: #18181b; color: #fff;">Click or press Tab</button>
</div>Definition and usage
#The border property is a full-fledged part of the box model. It adds to the element’s size unless you turn on box-sizing: border-box, and you can style each side separately with border-top, border-right and so on. Rounding the corners with border-radius applies to this very border.
outline is drawn outside the border and never affects the size or layout of neighboring elements. You can’t style it separately on each side: it’s always a single rectangle around the whole element. Modern browsers round it together with border-radius, and outline-offset lets you push it away from the edge.
Browsers use outline by default to show keyboard focus, so it’s a natural choice for your own focus indicators and for debugging layout, since it never shifts the content. Save border for the visible frames of cards, fields and buttons that are part of the design.
Syntax
#border: <thickness> <style> <color>;
outline: <thickness> <style> <color>;More examples
#.box-outline { outline: 6px solid #f59e0b; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box box-outline">2</div>
<div class="box">3</div>
</div>Despite the thick outline, items 1 and 3 stay in the same place as they would without it.
.box-border { border: 6px solid #f59e0b; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box box-border">2</div>
<div class="box">3</div>
</div>The same element with a border of the same thickness pushes neighbors 1 and 3 away to make room for itself.
Good practices
#- For a keyboard focus indicator, use
outline, ideally with:focus-visible, so you don’t shift the layout. - If you need a different border thickness on one side, it has to be
border. Outline is only ever a single rectangle. outline-offsetpushes the outline away from the element without changing its size.
Related entries
#- borderShorthand that sets the width, style, and color of a border.
- outlineDraws an outline around an element that doesn’t take up space in the layout.
- :focus-visibleMatches a focused element only when the browser decides the indicator should be visible, such as during keyboard navigation.
- border-radiusRounds the corners of an element.
- outline-offsetPushes the outline away from the element’s edge, or pulls it inward, without changing the page layout.
Spotted a mistake or missing an example? Write to us.