CSS — Outline

What an outline is

A line drawn around an element, outside its border edge:

.box {
    border: 2px solid teal;
    outline: 3px dashed orange;
    outline-offset: 4px;    /* gap between border and outline */
}

What the browser displays

(Teal rectangle with a detached orange dashed ring floating 4px beyond it.)

Outline vs border

	border	outline
Takes up layout space?	Yes — adds to box size	No — overlaps freely
Per-side styles?	Yes (border-top…)	No — all sides identical
Border-radius respected?	Yes	In modern browsers, yes

The zero-layout-impact property is the superpower: draw attention without shifting anything around it.

/* Highlight without moving the page */
.flash {
    outline: 3px solid gold;
}

Its day job: focus indication

Browsers draw a default outline around whatever has keyboard focus. The infamous "delete all outlines" reset:

/* NEVER do this */
:focus { outline: none; }

…removes the only way keyboard users can tell where they are on the page. Tab through your form blindfolded (no mouse) and you'll understand instantly.

The correct pattern: replace the default with something better, not nothing:

input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 3px solid #0d9488;
    outline-offset: 2px;
}

:focus-visible smartly shows rings for keyboard users while sparing mouse clickers.

<style>
    .btn {
        background: #0d9488;
        color: white;
        border: none;
        padding: 10px 20px;
    }
    .btn:focus-visible {
        outline: 3px solid #f59e0b;
        outline-offset: 3px;
        border-radius: 4px;
    }
</style>

<button class="btn">Tab to me</button>

(Clicking shows nothing special; tabbing to the button reveals a bold amber ring offset from its edge.)

Debugging trick

Outlines make great temporary highlighters because they never disturb layout:

document.querySelectorAll("img").forEach(el => el.style.outline = "2px solid red");

Paste in the console → every image outlined → find the misbehaving one.

Shorthand & longhands

outline: 2px solid red;          /* width style color      */
outline-width / -style / -color; /* longhand versions      */
outline-offset: 4px;             /* distance outward       */

Negative offsets pull the ring inward over the element itself.

Mini Practice

1. Draw border + outline on one box; vary outline-offset through 0/4/-4px
2. Tab through a form before and after adding proper :focus-visible styling
3. Console-outline every link on any site
4. Build a gold "selected" state using outline only — confirm zero layout shift when toggling

Next: fonts → (already written — next new topic: icons)