`outline și outline-offset` în CSS

Desenează un contur în jurul elementului, în afara chenarului, fără să ocupe spațiu și fără să miște elementele vecine.

Sintaxă CSS

outline: 2px solid #2563eb;
outline-offset: 3px;
outline: none;

/* proprietăți separate */
outline-width: 2px;
outline-style: dashed;
outline-color: currentColor;

Ce face `outline și outline-offset`

outline seamănă cu border, dar are două diferențe importante: nu ocupă spațiu în layout (nu împinge nimic, nu schimbă mărimea elementului) și se aplică pe toate laturile odată (nu există outline-top).

Browserele folosesc outline pentru inelul de focus de la tastatură. De aceea este locul potrivit pentru stiluri de focus personalizate, de obicei împreună cu :focus-visible. outline-offset depărtează conturul de element (valoare pozitivă) sau îl mută spre interior (valoare negativă).

În browserele actuale (Chrome 94, Firefox 88, Safari 16.4 și mai noi) conturul urmează colțurile rotunjite date de border-radius; în versiunile mai vechi era mereu dreptunghiular.

Valori uzuale

Valoare	Descriere
`outline-width`	Grosimea conturului (ex. 2px, thin, medium).
`outline-style`	Stilul liniei: solid, dashed, dotted, double, auto (stilul nativ al browserului).
`outline-color`	Culoarea conturului.
`outline-offset`	Distanța dintre contur și marginea elementului; poate fi negativă.
`outline: none`	Elimină conturul; acceptabil doar dacă oferi un alt indicator de focus.

Exemple

Exemplul 1: Inel de focus vizibil, doar la navigarea cu tastatura

Conturul albastru apare când utilizatorul ajunge pe buton cu Tab, nu și la clic cu mouse-ul.

.buton {
  border-radius: 8px;
}
.buton:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

Efect vizual în browser

La apăsarea tastei Tab, în jurul butonului apare un contur albastru de 3px, rotunjit ca butonul, la 3px distanță de el. Butonul și vecinii lui nu se mișcă deloc.

Exemplul 2: Evidențierea unei zone fără să miști layout-ul

Un border adăugat la hover ar mări cardul cu 2px și ar împinge vecinii; un outline nu.

.card-oferta:hover {
  outline: 2px dashed #f59e0b;
  outline-offset: -6px;
}