border

Zuletzt aktualisiert am 15. Februar 2026

border zeichnet einen sichtbaren Rahmen um ein Element. Der Rahmen liegt zwischen Padding und Margin und ist Teil der Box-Größe (bei border-box). Die Shorthand-Eigenschaft border fasst Breite, Stil und Farbe in einer Zeile zusammen. Für individuelle Kontrolle gibt es border-width, border-style, border-color und Einzeleigenschaften für jede Seite.

Grundlagen

Ein Border wird erst sichtbar, wenn mindestens ein border-style gesetzt ist. Ohne Style (oder mit none) wird kein Rahmen angezeigt, auch wenn Breite und Farbe angegeben sind. Das ist der häufigste Grund, warum ein Border “nicht funktioniert”.

Die Shorthand-Eigenschaft border setzt immer alle vier Seiten gleichzeitig. Wenn du nur eine einzelne Seite stylen willst, verwende border-top, border-right, border-bottom oder border-left.

Syntax & Werte

border-style

border-width

Beispiele

Border-Styles im Überblick

.b-solid { border: 3px solid #1a56db; }
.b-dashed { border: 3px dashed #dc2626; }
.b-dotted { border: 3px dotted #059669; }
.b-double { border: 4px double #7c3aed; }
.b-groove { border: 4px groove #94a3b8; }
.b-ridge { border: 4px ridge #94a3b8; }

<div class="border-demo b-solid">solid</div>
<div class="border-demo b-dashed">dashed</div>
<div class="border-demo b-dotted">dotted</div>
<div class="border-demo b-double">double</div>
<div class="border-demo b-groove">groove</div>
<div class="border-demo b-ridge">ridge</div>

Einzelne Seiten stylen

Du kannst jede Seite individuell gestalten. Das ist nützlich für Trennlinien, aktive Tab-Anzeigen oder dekorative Akzente.

.border-bottom-only {
  border-bottom: 3px solid #1a56db;
  background: #dbeafe;
}

.border-left-accent {
  border-left: 4px solid #059669;
  padding-left: 16px;
  background: #d1fae5;
}

.border-mixed {
  border-top: 3px solid #dc2626;
  border-bottom: 1px solid #e5e7eb;
  border-left: none;
  border-right: none;
}

<div class="border-bottom-only">Nur border-bottom (Trennlinie)</div>
<div class="border-left-accent">border-left als Akzent (Zitat-Stil)</div>
<div class="border-mixed">Verschiedene Seiten, verschiedene Styles</div>

Dekorative Trenner mit Border

Borders eignen sich hervorragend als Trenner zwischen Abschnitten, ohne extra HTML-Elemente wie <hr>.

.section {
  padding: 16px;
}

.section + .section {
  border-top: 1px solid #e5e7eb;
}

<div class="section">Erster Abschnitt</div>
<div class="section">Zweiter Abschnitt</div>
<div class="section">Dritter Abschnitt</div>

Border und box-sizing

Border ist Teil der Gesamtbreite bei border-box. Bei content-box kommt die Border-Breite obendrauf.

/* Tatsächliche Breite: 240px */
.border-content {
  box-sizing: content-box;
  width: 200px;
  border: 10px solid #dc2626;
  padding: 10px;
}

/* Tatsächliche Breite: 200px */
.border-border {
  box-sizing: border-box;
  width: 200px;
  border: 10px solid #059669;
  padding: 10px;
}

<div class="border-content">content-box: 200 + 20 + 20 = 240px</div>
<div class="border-border">border-box: 200px total</div>

Barrierefreiheit

Visuelle Struktur für kognitive Barrierefreiheit: Borders helfen Nutzern mit kognitiven Einschränkungen, Abschnitte und Bereiche auf einer Seite zu unterscheiden. Klar abgegrenzte Cards, Formulare oder Infoboxen sind leichter zu erfassen als Layout ohne visuelle Trenner. Verwende border sparsam, aber bewusst, um Struktur zu schaffen.

Nicht nur Farbe verwenden: Verlasse dich nicht allein auf Farbe, um Informationen zu vermitteln. Wenn du z.B. einen roten Border für Fehlerfelder verwendest, füge auch ein Icon oder einen Text hinzu. Farbenblinde Nutzer oder Screen-Reader-Nutzer sehen oder hören sonst nicht, dass etwas falsch ist.

Transparente Borders als Platzhalter für Focus: Ein häufiger Trick ist, einem Element einen transparenten Border zu geben und bei :focus die Farbe zu ändern. Das verhindert Layout-Shifts, weil der Border immer vorhanden ist, nur unsichtbar. Das verbessert die Stabilität des Layouts, wenn sich der Fokus ändert.

Häufige Fehler

• Border ohne border-style: border-width: 2px; border-color: red; zeigt keinen Rahmen, weil der Style fehlt. Verwende entweder die Shorthand (border: 2px solid red) oder setze border-style: solid explizit.
• border: none vs. border: 0: Beide entfernen den Border, aber border: none setzt den Style auf none, während border: 0 die Breite auf 0 setzt. In der Praxis ist border: none sicherer.
• Border vergessen bei width: 100% und content-box: Ein 2px Border auf jeder Seite macht die Box 4px breiter als den Container. Lösung: box-sizing: border-box.
• 3D-Styles mit kleiner Breite: Styles wie groove, ridge, inset und outset brauchen mindestens 3-4px Breite, um ihren Effekt zu zeigen. Bei 1px sehen sie wie solid aus.
• Border-Farbe nicht explizit setzen: Ohne border-color wird currentcolor verwendet, also die Textfarbe des Elements. Das ist oft gewollt, kann aber überraschen, wenn die Textfarbe vererbt wird.

Browser-Kompatibilität

border und alle zugehörigen Einzeleigenschaften werden von allen Browsern vollständig unterstützt.

Email-Kompatibilität

Border ist gut in HTML-Emails unterstützt und eine der zuverlässigsten Möglichkeiten, visuelle Trenner zu erstellen.

Verwandte Eigenschaften