outline

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Der Umriss (outline) eines Elements ist eine ähnliche Eigenschaft wie der Rahmen (border). Er nimmt jedoch keinen Platz im CSS-Box-Modell ein und hat somit keinen Einfluss auf die Positionierung anderer Elemente. Außerdem erzeugt outline keine rechteckige Box um das betreffende Element, sondern schmiegt sich an den unregelmäßigen Rand eines Textabsatzes an. Der Umriss eines Inline-Elements über mehrere Zeilen erstreckt sich, im Gegensatz zu seinem Rahmen, immer von Zeilenanfang bis Zeilenende.

Mit der zusammenfassenden Eigenschaft outline können die Eigenschaften outline-color, outline-style und outline-width in einer Anweisung deklariert werden. Alle drei Eigenschaften können auch separat deklariert werden.

Vererbt: nein

Siehe auch: border, outline-color, outline-style, outline-width

Werte

Die Syntax für die Eigenschaft outline ist wie folgt aufgebaut. Die Werte werden durch Leerzeichen voneinander getrennt:

outline: [color] [style] [width]

color steht für einen gültigen Wert für outline-color, style für einen gültigen Wert für outline-style, width für einen gültigen Wert für outline-width.

Alle drei Werte sind optional, es muss jedoch mindestens einer deklariert werden. Die Reihenfolge für die Angabe der Werte ist beliebig. Jeder nicht deklarierte Wert nimmt automatisch seinen Standardwert an.

Standardwert: keiner

Kompatibilität

CSS-Version: 2

Funktioniert nur in Internet Explorer 5 für Macintosh und Opera 7, entgegen der CSS2-Spezifikation allerdings nur als rechteckiger Umriss (wie border).

Beispiel

Folgende Stilregel verwendet die Pseudoklasse :focus, um einen gestrichelten, roten Umriss in mittlerer Stärke um das Element mit dem Eingabefeld zu erzeugen: