border vs outline: der Unterschied zwischen Rahmen und Kontur

Platz im Layout

Ein border ist die dritte Schicht des Box-Modells: Er zählt zur Breite der Box, verschiebt Nachbarn und Inhalt. Ein outline wird außerhalb des Rahmens gezeichnet, ohne Platz zu beanspruchen – nichts bewegt sich, wenn er erscheint oder verschwindet. Genau das braucht ein Fokusring: sichtbar werden, ohne das Layout zu verschieben.

Seiten, Radius, Abstand

border lässt sich für jede Seite einzeln setzen (border-top, border-left …) und folgt border-radius. outline ist immer rundum gleich; ein Abstand zur Box entsteht mit outline-offset, auch negativ nach innen. Ob die Kontur einem Radius folgt, hängt vom Browser ab; seit 2023 tun es alle verbreiteten.

Fokus: warum outline nicht entfernt werden soll

Browser zeichnen den Tastaturfokus als outline. outline: none nimmt Tastaturnutzern die Orientierung. Wer den Standardring nicht mag, ersetzt ihn mit :focus-visible { outline: 2px solid …; outline-offset: 2px; }, statt ihn zu löschen.

Was die Spezifikation über outline sagt

CSS 2.1 beschreibt outline ausdrücklich als Linie, die keinen Platz beansprucht und über allem anderen liegen darf. Zwei Folgen daraus: Der Umriss eines Elements mit mehreren Zeilenboxen muss nicht rechteckig sein, und der Wert invert von outline-color kehrt die Farben darunter um, damit die Linie auf jedem Hintergrund sichtbar bleibt. Beides gibt es beim Rahmen nicht: Er ist Teil der Box, gehört zu ihrer Größe und kennt keine invertierende Farbe.

Beide als reine Trennlinie

Sehr oft soll gar kein Rahmen um die ganze Box entstehen, sondern nur ein Strich an einer Kante. Dafür ist die Längsform gedacht: border-bottom: 1px solid #ccc zieht eine Linie unter das Element und lässt die anderen drei Seiten unberührt. Das kostet einen Pixel Höhe, und genau darum sollte die Linie zu einem Element gehören, dessen Höhe ohnehin vom Inhalt bestimmt wird – bei einer Box mit fester Höhe verschiebt sie sonst den Inhalt.

Ein verbreiteter Kniff nutzt das aus: Ein Element bekommt von Anfang an einen Rahmen in der Hintergrundfarbe, der im Zustand der Auswahl nur die Farbe wechselt. So springt beim Umschalten nichts, weil der Platz die ganze Zeit reserviert war. Mit outline braucht es diesen Kniff nicht, weil die Kontur ohnehin keinen Platz belegt – dafür lässt sie sich in CSS 2.1 nicht auf eine einzelne Seite beschränken. Wer eine einseitige Linie ohne Platzbedarf will, greift daher zu einem Schatten ohne Weichzeichnung oder zu einem Pseudoelement.

Im Druck und in der Kontrastdarstellung

Beim Ausdruck verhalten sich die beiden verschieden. Rahmen werden gedruckt, weil sie zum Kasten gehören; Konturen behandeln viele Ausgabewege wie eine Bildschirmzugabe und lassen sie weg. Wer eine Umrandung auf dem Papier braucht – etwa um einen Kasten mit einer Zusammenfassung –, notiert sie deshalb als border und nicht als outline. Umgekehrt gehört ein Fokusring nur auf den Bildschirm und stört auf dem Papier nichts, weil er dort gar nicht erst erscheint.

In der Darstellung mit erhöhtem Kontrast, die manche Betriebssysteme erzwingen, kann es genau andersherum kommen: Dort setzt das System eigene Farben durch und behält die Kontur bei, während eine Rahmenfarbe überschrieben wird. Für eine Umrandung, die unter allen Umständen sichtbar bleiben muss, ist die Kontur damit die zuverlässigere Wahl. Beides zusammen zu setzen ist kein Fehler und in Formularen sogar üblich: der Rahmen zeichnet das Feld, die Kontur zeigt, wo die Eingabe gerade steht.

Was CSS 2.1 an Rahmenstilen kennt

Die acht Stile von CSS 2.1 gelten für beide Eigenschaften: durchgehend, gestrichelt, gepunktet, doppelt, gerillt, gekehlt, eingelassen und erhaben. Die letzten vier zeichnet der Browser, indem er die Farbe von sich aus aufhellt und abdunkelt – wie stark, ist ausdrücklich nicht festgelegt, weshalb sie überall etwas anders aussehen. Ein doppelter Rahmen wiederum verteilt seine Breite auf zwei Linien und den Zwischenraum, und auch diese Aufteilung bestimmt der Browser.

Wer ein vorhersagbares Ergebnis braucht, bleibt deshalb bei den ersten drei Stilen. Die übrigen stammen aus einer Zeit, in der Bedienoberflächen plastisch gezeichnet wurden, und begegnen einem heute fast nur noch als Vorgabewert eines Formularfeldes. Der neunte Wert, der gar nichts zeichnet, ist von dem zehnten zu unterscheiden, der ebenfalls nichts zeichnet, aber in Tabellen mit zusammengelegten Rahmen anders behandelt wird – ein Unterschied, der genau an dieser einen Stelle zählt.

Wann welches

• Gestaltung, die zur Box gehört und Platz einnehmen darf: border.
• Hervorheben ohne Layoutänderung, Fokus, Debug-Markierungen: outline.
• Nur eine Seite: border.
• Zweite Linie um eine Box mit Rahmen: outline mit outline-offset, oder box-shadow mit Ausbreitung.

Häufige Fragen