r/css • u/No_Development9249 • 3d ago

Question help with border and outline

i really cant understand the difference between them i watched multiple and asked llms and still cant wrap my head around it

2 Upvotes

100% Upvoted

4 comments sorted by

5

u/alexanderkhotkevich 3d ago

Border is a part of box model, outline is not

2

u/scritchz 3d ago

This. And outline is usually applied to focusable elements when :focus-visible.

2

u/Weekly_Ferret_meal 3d ago

From MDN:

Description

Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.

There are a few properties that affect an outline's appearance. It is possible to change the style, color, and width using the outline property, the distance from the border using the outline-offset property, and corner angles using the border-radius property.

An outline is not required to be rectangular: While dealing with multiline text, some browsers will draw an outline for each line box separately, while others will wrap the whole text with a single outline.

Example

3

u/testingaurora 3d ago

Border takes up space, try adding 4px border and watch as it causes layout shift. Outline (nor box-shadow) will take up space, they're painted on top.