CSS Outline – Konturen mit CSS zeichnen

Mit der CSS Outline Eigenschaft ist es möglich, eine Kontur um ein Element zu ziehen. Es besitzt viel Ähnlichkeit zu CSS Border, beansprucht aber nicht die einstellbare Breite. Kann sehr schön in Verbindung mit der Border Eigenschaft genutzt werden.
Im Gegensatz zur border Eigenschaft kann nur eine komplette Kontur das Element umhüllen. Einzelne Seiten können somit nicht angesprochen werden.

Beschreibung und Syntax zu CSS outline

outline: 1px solid blue;
outline: 5px dashed #000000;

Erläuterung der Eigenschaften

outline 1px solid blue
Im Beispiel wird ein 1 Pixel breiter Rahmen/Kontur um das Element gezogen. Die Farbangabe ist hier blau, der Linienstil solid, also durchgängig.

outline 5px dashed #000000
Hier wurde eine 5 Pixel breite Kontur um das Element gezogen. Dashed gibt an, dass es sich bei diesem Linienstil um eine gestrichelte Linie handelt. Der Farbcode #000000 ist schwarz.

Farbwerte und Farbnamen

Alles über Farbnamen und Farbcodes können bei der CSS Eigenschaft color angesehen werden.

Der Linienstil (border-style)

Es gibt verschiedene Stilarten der Linien bzw. des kompletten Rahmens. Der Eigenschaftswert könnte durch die Linienstärke (border-width) anders aussehen. Doppellinien oder 3D-Linien benötigen daher einen dickeren Rahmen, welcher aber nicht zwingend erforderlich ist.

• dashed (gestrichtelte Linie)
• dotted (gepunktete Linie) – damit lässt sich oft eine Linie augenscheinlich dünner gestallten
• double (doppelte Linie)
• groove (3D-Linie, wandelt die Rahmenfarbe in 2 Teile um, für top+left sowie right+bottom)
• outset (3D-Linie, sieht aus wie herausgesetzt)
• inset (3D-Linie, wie outset, nur umgekehrt)
• solid (durchgezogene Linie)

Informationen und Werte

Vererbbar: Nein
Initialwert: none (keine Kontur)
Werte: outline-color (Farbname oder Farbcode), outline-style (Linienstil), outline-width (Konturstärke)