Contur - CSS-Tricks | Almanah CSS 2025

outlineProprietatea în CSS trage o linie în jurul exteriorului unui element. Este similar cu frontiera, cu excepția faptului că:

Merge întotdeauna pe toate laturile, nu puteți specifica anumite laturi
Nu face parte din modelul cutiei, deci nu va afecta poziția elementului sau a elementelor adiacente (frumos pentru depanare!)

Alte fapte minore includ că nu respectă raza chenarului (are sens, presupun că nu este un chenar) și că nu este întotdeauna dreptunghiulară. Dacă conturul se învârte în jurul unui element inline cu diferite dimensiuni de font, de exemplu, Opera va desena o casetă eșalonată în jurul acestuia.

Este adesea folosit din motive de accesibilitate, pentru a sublinia o legătură atunci când este tabulată, fără a afecta poziționarea și într-un mod diferit de cel al mouse-ului.

a:focus ( outline: 1px dashed red; )

Stenografie

outline: ( || || ) | inherit

Are aceleași proprietăți ca și chenarul, dar cu „contur-” în schimb.

Stenograma de mai sus ar fi putut fi scrisă:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Note

Nu puteți seta un contur pe una (sau două sau trei) părți ale elementelor. Numai pentru toate părțile. Nu există nici un astfel de lucru ca outline-top, outline-right, outline-bottomsau outline-leftca exista cu border.
Încercați să deschideți consola pe orice site web și să rulați document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- veți vedea o mulțime de structuri de site-uri în acest fel.
outlineeste folosit în :focusmod implicit pentru stiluri. Amintiți-vă dacă eliminați vreodată outlinestiluri, cum ar fi a:focus ( outline: 0; ), trebuie să le adăugați din nou folosind un alt tip de stil distinct vizual.