Ausführbare CSS-Docs: CSS Border

Q: Wie füge ich in CSS einen Rahmen hinzu?

Nimm die Kurzschreibweise mit Breite, Stil und Farbe: border: 2px solid #2563eb;. Der Stil ist der wichtigste Teil: Ohne ihn ist der Rahmenstil none, und es wird kein Rahmen gezeichnet.

Q: Warum wird mein CSS-Rahmen nicht angezeigt?

Fast immer, weil kein Rahmenstil gesetzt ist. border: 2px #2563eb; oder border-color: red; allein zeichnen nichts, weil der Standardwert von border-style none ist. Füge solid, dashed oder einen anderen Stil hinzu.

Q: Wie mache ich abgerundete Ecken in CSS?

Mit border-radius: border-radius: 8px; rundet alle vier Ecken ab. border-radius: 50%; an einem Quadrat ergibt einen Kreis, und ein großer Wert wie 999px eine Pillenform. Es rundet auch den Hintergrund ab, sogar ohne Rahmen.

Q: Wie setze ich einen Rahmen nur auf einer Seite?

Mit einer Seiten-Eigenschaft: border-bottom: 2px solid #e5e7eb;, oder border-inline-start für die Seite, an der der Text beginnt. Das funktioniert auch für Sprachen, die von rechts nach links laufen.

Die border-Kurzschreibweise

border zeichnet eine Linie um ein Element, zwischen seinem Padding und seinem Margin. Die Kurzschreibweise nimmt drei Teile in beliebiger Reihenfolge: eine Breite, einen Stil und eine Farbe.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Teil	Einzeleigenschaft	Werte	Standard
Breite	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Stil	`border-style`	`solid`, `dashed`, `dotted`, `double` und weitere	`none`
Farbe	`border-color`	Jede Farbe	`currentColor` (die Textfarbe)

Den Stil darfst du nicht weglassen. Sein Standardwert ist none, also zeichnet border: 2px #2563eb; gar nichts. Lässt du die Farbe weg, übernimmt der Rahmen die Textfarbe des Elements.

Rahmenstile

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double braucht mindestens 3px, um zwei Linien zu zeigen. groove, ridge, inset und outset schattieren die Farbe für einen 3D-Look und sehen je nach Browser leicht anders aus. hidden sieht aus wie none; die beiden unterscheiden sich nur in Tabellen mit zusammengefassten Rahmen, die die Seite zu HTML-Tabellenrahmen behandelt.

Eine Seite nach der anderen

Jede Seite hat ihre eigene Kurzschreibweise (border-top, border-right, border-bottom, border-left), und jeder Teil hat Einzeleigenschaften pro Seite wie border-top-color. Die logischen Varianten, border-inline-start und border-block-end, folgen der Textrichtung:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width und border-style nehmen ein bis vier Werte in derselben Reihenfolge im Uhrzeigersinn wie Padding: oben, rechts, unten, links.

Abgerundete Ecken mit border-radius

border-radius rundet die Ecken des Rahmens und des Hintergrunds ab, funktioniert also auch an Elementen ganz ohne Rahmen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Wert	Ergebnis
`border-radius: 8px`	Alle Ecken um 8px abgerundet
`border-radius: 50%`	Ein Kreis an einem quadratischen Element, eine Ellipse an einem Rechteck
`border-radius: 999px`	Eine Pille: Die kurzen Seiten werden zu vollen Halbkreisen
`border-radius: 8px 0`	Oben links und unten rechts 8px, die anderen beiden eckig
`border-top-left-radius: 12px`	Nur eine Ecke
`border-radius: 50% / 25%`	Elliptische Ecken: horizontaler Radius / vertikaler Radius

Ein Kind mit Hintergrund kann über die abgerundeten Ecken seines Elternelements hinausragen. overflow: hidden am Elternelement schneidet es an der Rundung ab.

Border vs. Outline

Eine Outline sieht aus wie ein Rahmen, wird aber außerhalb davon gezeichnet und nimmt keinen Platz ein, verschiebt also beim Hinzufügen nie etwas. Deshalb verwenden Browser Outlines für Fokusringe.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Nimmt Platz ein	Ja, Teil der Boxgröße	Nein
Pro Seite	Ja (`border-top`, ...)	Nein, rundherum
Folgt `border-radius`	Ja	Ja, in aktuellen Browsern
Abstand zur Box	Nein	Ja, `outline-offset`
Typischer Einsatz	Design	Fokusanzeigen, Debugging

Häufige Fehler

Kein Rahmenstil. border: 1px #111827; und border-color: red; zeichnen nichts. Gib solid (oder einen anderen Stil) an.
Ein Rahmen, der das Layout beim Hovern springen lässt. Reserviere den Platz mit einem transparenten Rahmen oder nimm eine Outline oder box-shadow.
Den Rahmen in der Breite vergessen. Ein Element mit width: 100% und Rahmen läuft unter content-box aus seinem Container heraus. Nimm box-sizing: border-box.
border-radius mit einem Kind, das aus den Ecken ragt. Gib dem abgerundeten Elternelement overflow: hidden.
Fokus-Outlines mit outline: none entfernen. Tastaturnutzer brauchen sie; gestalte die Outline um, statt sie zu löschen.

Häufig gestellte Fragen

Wie füge ich in CSS einen Rahmen hinzu?

Nimm die Kurzschreibweise mit Breite, Stil und Farbe: border: 2px solid #2563eb;. Der Stil ist der wichtigste Teil: Ohne ihn ist der Rahmenstil none, und es wird kein Rahmen gezeichnet.

Warum wird mein CSS-Rahmen nicht angezeigt?

Fast immer, weil kein Rahmenstil gesetzt ist. border: 2px #2563eb; oder border-color: red; allein zeichnen nichts, weil der Standardwert von border-style none ist. Füge solid, dashed oder einen anderen Stil hinzu.

Wie mache ich abgerundete Ecken in CSS?

Mit border-radius: border-radius: 8px; rundet alle vier Ecken ab. border-radius: 50%; an einem Quadrat ergibt einen Kreis, und ein großer Wert wie 999px eine Pillenform. Es rundet auch den Hintergrund ab, sogar ohne Rahmen.

Wie setze ich einen Rahmen nur auf einer Seite?

Mit einer Seiten-Eigenschaft: border-bottom: 2px solid #e5e7eb;, oder border-inline-start für die Seite, an der der Text beginnt. Das funktioniert auch für Sprachen, die von rechts nach links laufen.

Was ist der Unterschied zwischen border und outline?

Ein Rahmen gehört zur Box: Er nimmt Platz ein und ändert die Größe des Elements. Eine Outline wird außerhalb des Rahmens gezeichnet, ohne Platz einzunehmen, lässt sich nicht pro Seite setzen und ist das, was Browser für Fokusringe verwenden. Beide folgen in aktuellen Browsern border-radius.

Verwandte Konzepte