CSS outline

CSS outline

Właściwość outline służy do rysowania obrysu elementu na zewnątrz obramowania (border). W pytaniu egzaminacyjnym czerwony pas znajduje się poza czarną ramką, dlatego poprawną odpowiedzią jest właśnie outline.

Składnia

outline jest właściwością skróconą. Można w niej podać:
- grubość obrysu,
- styl linii,
- kolor.

p {
  border: 2px solid black;
  outline: 10px solid red;
  padding: 10px;
}

W tym przykładzie:
- border: 2px solid black; tworzy czarną ramkę,
- outline: 10px solid red; tworzy czerwony obrys poza ramką,
- padding: 10px; ustala odstęp między tekstem a ramką.

Różnica między outline a border

border jest częścią modelu pudełkowego CSS i wpływa na rozmiar elementu. outline nie zajmuje miejsca w układzie strony, więc nie przesuwa sąsiednich elementów. Może nachodzić na inne elementy, ponieważ jest rysowany poza obszarem elementu.

Przydatne właściwości powiązane

outline-width: 10px;
outline-style: solid;
outline-color: red;
outline-offset: 5px;

outline-offset pozwala odsunąć obrys od obramowania. Jest to przydatne np. przy podświetlaniu aktywnych pól formularza lub elementów zaznaczonych fokusem.

Zapamiętaj

Jeśli kolor lub linia ma pojawić się poza obramowaniem, używa się outline, a nie padding, border ani background.