border

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.

Steckbrief border

Syntax: border: <border-width> <border-style> <border-color>
Initialwert: medium none currentcolor
Vererbt: Nein
Animierbar: Ja
Kurzform für: border-width, border-style, border-color

Kategorie: Box-Modell
Werte: 14
Beispiele: 4
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

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

14 Werte

border-style

Wert	Beschreibung	Beispiel
`none`	Kein Rahmen (Standard).	border-style: none
`solid`	Durchgezogene Linie.	border: 2px solid #333
`dashed`	Gestrichelte Linie.	border: 2px dashed #333
`dotted`	Gepunktete Linie.	border: 2px dotted #333
`double`	Doppelte Linie. Breite muss mindestens 3px sein.	border: 4px double #333
`groove`	3D-Effekt: eingedrückte Rille.	border: 4px groove #999
`ridge`	3D-Effekt: erhabene Kante.	border: 4px ridge #999
`inset`	3D-Effekt: Box wirkt eingedrückt.	border: 4px inset #999
`outset`	3D-Effekt: Box wirkt erhaben.	border: 4px outset #999
`hidden`	Wie none, aber hat Vorrang bei Tabellen-Border-Kollision.	border-style: hidden

border-width

Wert	Beschreibung	Beispiel
`<length>`	Fester Wert in einer CSS-Einheit.	border-width: 2px
`thin`	Dünner Rahmen (browserspezifisch, meist 1px).	border-width: thin
`medium`	Mittlerer Rahmen (Standard, meist 3px).	border-width: medium
`thick`	Dicker Rahmen (browserspezifisch, meist 5px).	border-width: thick

Beispiele

4 Beispiele

Border-Styles

.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>

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

Einzelne Border-Seiten

.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>

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

Border als Trenner

.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 ist Teil der Gesamtbreite bei border-box. Bei content-box kommt die Border-Breite obendrauf.

Border und box-sizing

/* 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

5 Fehler

01 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.

02 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.

03 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.

04 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.

05 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

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

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

Grundlegende Styles (solid, dashed, dotted) funktionieren, 3D-Styles werden oft anders dargestellt
Thunderbird

Komplett
Yahoo Mail

Komplett

Steckbrief border

Syntax: border: <border-width> <border-style> <border-color>
Initialwert: medium none currentcolor
Vererbt: Nein
Animierbar: Ja
Kurzform für: border-width, border-style, border-color

Kategorie: Box-Modell
Werte: 14
Beispiele: 4
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

border-radius outline padding margin

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da