W CSS za "linię" widoczną poza obramowaniem odpowiada właściwość outline. Outline jest rysowany na zewnątrz krawędzi border (lub krawędzi elementu, gdy border nie ma), dzięki czemu wizualnie otacza element dodatkowym obrysem. Istotna cecha praktyczna: outline nie zajmuje miejsca w modelu pudełkowym, więc zwykle nie powoduje przesuwania sąsiednich elementów.
Dlaczego pozostałe odpowiedzi są niepoprawne?
- border – to właściwość tworząca obramowanie elementu (jego część w box modelu). Zmiana border zmienia "ramkę" elementu i może wpływać na układ (np. zwiększyć całkowity rozmiar).
- padding – to odstęp wewnątrz elementu, między treścią a border. Nie tworzy zewnętrznej czerwonej linii; raczej powiększa przestrzeń tła wewnątrz.
- background – dotyczy tła (koloru/obrazu). Tło wypełnia obszar treści i padding (oraz czasem obszar pod border zależnie od ustawień), ale nie tworzy cienkiej linii na zewnątrz obramowania.
W praktyce outline jest często używany do oznaczania elementu w stanie :focus (np. w formularzach), bo poprawia widoczność aktywnego pola bez zmiany rozmiarów i bez "rozpychania" layoutu. Dodatkowo można kontrolować odsunięcie obrysu od border za pomocą outline-offset, gdy potrzebny jest wyraźny dystans.
