Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >border-width

border-width

border-width: <width>{1,4}

Legt die Stärke eines Rahmens fest. Sie ist Teil der Kurzschreibweise border; allein ist sie nützlich, wenn sich nur die Stärke ändern soll oder jede Seite anders sein soll.

Werte

  • Länge – z. B. 2px, 0.2em. Weder Prozent noch negative Werte sind erlaubt.
  • thin, medium, thick – dünn, mittel (Standard) und dick; in aktuellen Browsern 1, 3 und 5 px.
  • Ein bis vier Werte werden wie bei margin auf die Seiten verteilt (oben, rechts, unten, links).

Einzelne Seiten: border-top-width, border-right-width, border-bottom-width, border-left-width.

Initialwert: medium. Vererbt: nein. Gilt für: alle Elemente.

Beispiele

Seiten unterschiedlicher Stärke – ein dickerer Balken links:

<div class="notice">Ein Hinweis mit kräftigem Balken links.</div>

.notice {
  max-width: 320px;
  padding: 8px 12px;
  background: #fff8e1;
  border-style: solid;
  border-color: #ff9800;
  border-width: 1px 1px 1px 6px;
}
Ergebnis
Ein Hinweis mit kräftigem Balken links.

Die Schlüsselwörter thin, medium und thick:

<div class="box thin">thin</div>
<div class="box medium">medium</div>
<div class="box thick">thick</div>

.box {
  display: inline-block;
  margin-right: 8px;
  padding: 6px 12px;
  border-style: solid;
  border-color: #38b8f9;
}
.thin { border-width: thin; }
.medium { border-width: medium; }
.thick { border-width: thick; }
Ergebnis
thin
medium
thick

Worauf Sie achten sollten

  • Ohne border-style wird der Rahmen nicht gezeichnet, auch wenn er eine Stärke hat – der Standardstil ist none, und damit zählt die Stärke als 0.
  • Die Stärke wird zu den Abmessungen des Elements addiert, außer es hat box-sizing: border-box.
  • Für eine Stärke, die sich mit der Schriftgröße ändert, em verwenden; Prozent funktionieren hier nicht.
  • Browser runden die Stärke auf ganze Bildschirmpixel – 0.5px kann auf einem gewöhnlichen Monitor wie 1 px aussehen oder verschwinden.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
border
border-style
border-color
box-sizing