outline-width

Die CSS-Eigenschaft outline-width legt die Dicke der Umrandung (Outline) eines Elements fest. Was ist eine Umrandung? Eine Umrandung ist eine Linie, die um Elemente gezeichnet wird – außerhalb des Randbereichs –, die für Barrierefreiheit oder Dekorationszwecke verwendet wird, wenn das Element den Fokus hat.

button:focus {
  outline-width: 5px;
}

Normalerweise setzen wir die Umrandung eines Elements mit der Kurzschreibweise, die outline-width beinhaltet.

a:focus {
  outline: 5px solid gray;
}

outline-width ist eine Bestandteil-Eigenschaft in der Kurzschreibweise outline und ist in der Spezifikation CSS Basic User Interface Module Level 4 definiert, die sich derzeit im Entwurfsstadium befindet.

Syntax

outline-width: <line-width>

/* where */
<line-width> = <length> | thin | medium | thick

• Anfangswert: medium
• Gilt für: alle Elemente
• Vererbt: nein
• Berechneter Wert: absolute Länge; 0, wenn der Umrandungsstil none ist.
• Animationstyp: nach berechnetem Wert

Werte

/* Keyword values */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* <length> values */
outline-width: 1px;
outline-width: 0.2em;
outline-width: 0.2cm;

/* Global values */
outline-width: initial;
outline-width: inherit;
outline-width: unset;

• <length>: Die Dicke der Umrandung, gesetzt als <length>, z. B. 2px, 0.1rem.
• thin: Äquivalent zu 1px in Desktop-Browsern, kann aber je nach User-Agent variieren.
• medium: Der Standardwert. Er ist äquivalent zu 3px in Desktop-Browsern, kann aber je nach User-Agent variieren.
• thick: Äquivalent zu 5px in Desktop-Browsern, kann aber je nach User-Agent variieren.
• initial: Wendet die Standardeinstellung der Eigenschaft an, nämlich medium.
• inherit: Übernimmt den Wert von outline-width des Elternteils.
• unset: Entfernt die aktuelle outline-width vom Element.

Beispiel

Das folgende Beispiel macht die Umrandung des Texteingabefelds dicker, sobald es den Fokus hat.

input {
  outline: 1px solid lightblue;
}

input:focus {
  outline-width: 3px;
}

Demo

Browser-Unterstützung

IE	Edge	Chrome	Firefox	Safari	Opera
8+	Alle	Alle	Alle	Alle	Alle

iOS Safari	Android Chrome	Android Firefox	Android Browser	Opera Mobile
Alle	Alle	Alle	92	64

Weitere Informationen

• CSS Basic User Interface Module Level 4
• MDN-Dokumentation

Verwandte Beiträge

Verwandt