CSS border-style Eigenschaft

Die CSS-Eigenschaft border-style legt den Linienstil aller vier Seiten des Rahmens eines Elements auf einmal fest — zum Beispiel solid, dashed oder dotted. Diese Seite erklärt jeden Wert, wie die Kurzschreibweise mit einem bis vier Werten auf jede Seite angewendet wird, und welche Fallstricke man kennen sollte, bevor man einen Rahmen einsetzt.

border-style ist eine Kurzschreibweise für die vier einzelnen Seiteneigenschaften: border-top-style, border-bottom-style, border-left-style und border-right-style.

Warum das wichtig ist

Ein Rahmen wird erst sichtbar, wenn er einen Stil hat. Das ist die häufigste Anfängerfalle: Wenn man border-width und border-color setzt, aber border-style auf seinem Standardwert none belässt, wird nichts gerendert — der Browser reserviert keinen Platz und zeichnet keine Linie. Damit ist border-style praktisch der Schalter, der einen Rahmen einschaltet. Im realen Code setzt man alle drei Werte meist auf einmal mit der Kurzschreibweise border (z. B. border: 1px solid #1c87c9;), aber border-style direkt zu verwenden ist sinnvoll, wenn man für jede Seite einen anderen Linienstil möchte oder nur den Stil beim Hovern/Fokussieren ändert, während die Breite gleich bleibt (was einen Layout-Sprung vermeidet).

Der Rahmen wird über dem Hintergrund des Elements gezeichnet, der Wert wird nicht vererbt und ist nicht animierbar.

So funktioniert die Kurzschreibweise mit einem bis vier Werten

border-style akzeptiert einen bis vier Werte, sodass jede Seite einen eigenen Stil haben kann:

Ein Wert — wird auf alle vier Seiten angewendet.
Zwei Werte — der erste gilt für oben und unten; der zweite für links und rechts.
Drei Werte — der erste gilt für oben; der zweite für links und rechts; der dritte für unten.
Vier Werte — oben, rechts, unten, links, in Uhrzeigerrichtung (eine praktische Eselsbrücke: TRouBLe).

Ein kurzer Hinweis zur Browser-Unterstützung: Alle modernen Browser unterstützen sämtliche unten aufgeführten Werte. Die 3D-Stile (groove, ridge, inset, outset) erzielen ihren Effekt aus der border-color, daher wirken sie bei hellen Farben dezent und verschwinden vollständig, wenn die Farbe black oder sehr dunkel ist.

Anfangswert	none
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbt	Nein.
Animierbar	Nein.
Version	CSS1
DOM Syntax	object.style.borderStyle = "dotted double";

Syntax

Syntax der CSS border-style Eigenschaft

border-style: none |hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial |inherit;

Beispiel der border-style Eigenschaft:

Beispiel der CSS border-style Eigenschaft mit dem Wert dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-style: dotted;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p> Example of dotted border-style.</p>
  </body>
</html>

Probier es selbst »

Beispiel der border-style Eigenschaft, bei der jede Seite einen eigenen Wert hat:

Beispiel der CSS border-style Eigenschaft mit den Werten double, solid, dashed und dotted

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border-width: 4px;
        border-style: double solid dashed dotted;
        border-color: #1c87c9;
        color: #8ebf42;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Example, where each side has own value.</p>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der border-style Eigenschaft mit allen Werten:

Beispiel der CSS border-style Eigenschaft mit den Werten hidden, double, solid, dashed, dotted, groove, ridge, inset und outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #eee;
        font-size: 20px;
        text-align: center;
      }
      main div {
        display: flex;
        align-items: center;
        justify-content: center;
        color: black;
        padding-top: 30px;
        padding-bottom: 30px;
        width: 200px;
        height: 100px;
        margin: 15px;
        font-weight: bold;
        background-color: #c9c5c5;
        border: 8px solid #1c87c9;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-style example classes */
      .b1 {
        border-style: hidden;
      }
      .b2 {
        border-style: dotted;
      }
      .b3 {
        border-style: dashed;
      }
      .b4 {
        border-style: solid;
      }
      .b5 {
        border-style: double;
      }
      .b6 {
        border-style: groove;
      }
      .b7 {
        border-style: ridge;
      }
      .b8 {
        border-style: inset;
      }
      .b9 {
        border-style: outset;
      }
    </style>
  </head>
  <body>
    <h1>Border-style value examples</h1>
    <main class="flex-center">
      <div class="b1">
        hidden
      </div>
      <div class="b2">
        dotted
      </div>
      <div class="b3">
        dashed
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        solid
      </div>
      <div class="b5">
        double
      </div>
      <div class="b6">
        groove
      </div>
    </main>
    <main class="flex-center">
      <div class="b7">
        ridge
      </div>
      <div class="b8">
        inset
      </div>
      <div class="b9">
        outset
      </div>
    </main>
  </body>
</html>

Probier es selbst »

Werte

Wert	Beschreibung	Ausprobieren
none	Zeigt keinen Rahmen an. Standardwert.	Ausprobieren »
hidden	Wie „none", außer bei der Rahmenkonfliktauflösung für Tabellenelemente.	Ausprobieren »
dotted	Der Rahmen wird als eine Reihe von Punkten dargestellt.	Ausprobieren »
dashed	Der Rahmen wird als eine Reihe von Strichen dargestellt.	Ausprobieren »
solid	Der Rahmen wird als durchgezogene Linie dargestellt.	Ausprobieren »
double	Der Rahmen wird als doppelte durchgezogene Linie dargestellt.	Ausprobieren »
groove	Ein 3D-gerillter Rahmen, der den Eindruck erweckt, der Rahmen sei eingraviert. Gegenteil von ridge.	Ausprobieren »
ridge	Gibt einen 3D-kammförmigen Rahmen an und erzeugt den Eindruck eines erhabenen Erscheinungsbilds. Gegenteil von groove.	Ausprobieren »
inset	Ein 3D-Effekt, der den Eindruck erweckt, das Element sei eingebettet. Gegenteil von outset.	Ausprobieren »
outset	Ein 3D-Effekt, der den Eindruck erweckt, das Element sei erhaben. Gegenteil von inset.	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Häufige Fallstricke

Kein Stil bedeutet keinen Rahmen. Bei border-style: none (dem Standardwert) haben border-width und border-color keine sichtbare Wirkung. Immer einen Stil setzen.
hidden vs. none. An einer normalen Box sehen sie identisch aus. Der Unterschied zeigt sich nur in Tabellen: Bei der Rahmenkonfliktauflösung gewinnt hidden und unterdrückt den Rahmen der benachbarten Zelle, während none die niedrigste Priorität hat.
groove, ridge, inset und outset benötigen einen farbigen, mehrpixelbreiten Rahmen. Ihre 3D-Illusion entsteht aus helleren/dunkleren Abstufungen der border-color, daher sollte eine Breite von mindestens 2px–4px verwendet und reines Schwarz oder Weiß vermieden werden.
Nur border-style zu ändern hält die Box-Größe stabil, da die Breite unverändert bleibt — nützlich für Hover-/Fokus-Zustände, die dashed gegen solid tauschen, ohne das Layout zu verschieben.

CSS border-style Eigenschaft

Warum das wichtig ist

So funktioniert die Kurzschreibweise mit einem bis vier Werten

Syntax

Beispiel der border-style Eigenschaft:

Beispiel der border-style Eigenschaft, bei der jede Seite einen eigenen Wert hat:

Ergebnis

Beispiel der border-style Eigenschaft mit allen Werten:

Werte

Häufige Fallstricke

Verwandte Eigenschaften

Übung