CSS-Referenz
11. Programmumgebung
Es gibt eine besondere Form von Rahmen, die dynamischen Umrisslinien (outline).
Auch diese spezielle Eigenschaft wird vom Internet Explorer noch nicht unterstützt, der Vollständigkeit halber soll sie hier aber erwähnt werden, da sie zum Testen oder für User-Stylesheets durchaus brauchbar sind – denn anders als border benötigt eine outline keinen eigenen Platz, der zur Neuberechnung von Ausdehnung und Position einer Box führen würde.
Outlines dienen vor allem der dynamischen Hervorhebung von Elementen, wie zum Beispiel dem Fokus-Rahmen bei Formular-Elementen oder dem :focus-Status bei Hyperlinks.
Im Prinzip funktioniert outline genau wie border und benutzt auch sehr ähnliche Werte. Der Unterschied ist, dass ein Umriss immer für das gesamte Element gilt, also keine unterschiedlichen Werte für oben, rechts, unten oder links angegeben werden können.
11.1 outline-width
Bestimmt die Breite der Umrisslinie [CSS2].
Beispiel:
p.teaser {outline-width: 2px;}
| Werte | Längenangabe | thin | medium | thick | inherit |
| Default | medium |
| Vererbt | nein |
11.2 outline-style
Bestimmt den Stil einer Umrisslinie [CSS2].
Beispiel:
a:focus {outline-style: solid;}
| Werte | none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit |
| Default | none |
| Vererbt | nein |
11.3 outline-color
Bestimmt die Farbe der Umrisslinie [CSS2].
Beispiel:
a:focus {outline-color: #a00;}
| Werte | Farbe | invert | inherit |
| Default | invert |
| Vererbt | nein |
Der Wert invert soll dafür sorgen, dass die Umrisslinie unter allen Umständen sichtbar ist.
11.4 outline (Kurzform)
Fasst alle Bestimmungen für die Umrisslinie zusammen [CSS2].
Beispiel:
a:focus {outline: 1px solid invert;}
| Werte | outline-color | outline-style | outline-width | inherit |
| Default | siehe einzelne Eigenschaften |
| Vererbt | nein |
