CSS-Eigenschaft border-style

Die CSS-Eigenschaft border-style legt den Stil aller vier Seiten der Grenzen eines Elements fest. Es ist eine Kurzform für die Definition von border-top-style, border-bottom-style, border-left-style, border-right-style.

Diese Eigenschaft kann einen bis vier Werte haben. So kann jede Seite ihren eigenen Wert haben.

Der Standardwert von border-style ist none. Die Rahmen werden über dem Hintergrund des Elements platziert.

Sie müssen auch wissen, dass einige Browser einige Arten von Stilen nicht unterstützen. Normalerweise, wenn ein Stil nicht unterstützt wird, zeichnet der Browser den Rand als festen Rahmen.

Die Eigenschaft border-style kann mit einem, zwei, drei oder vier Werten angegeben werden. Wenn ein Wert angegeben wird, gilt der gleiche Stil für alle vier Seiten. Wenn zwei Werte angegeben werden, gilt der erste Stil für die Ober- und Unterseite, der zweite für die linke und rechte Seite. Wenn drei Werte angegeben werden, gilt der erste Stil für die Oberseite, der zweite für die linke und rechte Seite, der dritte für die Unterseite. Wenn vier Werte angegeben werden, gelten die Stile für die Bereiche oben, rechts, unten und links, wie in Uhrzeigerrichtung.

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

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      border-style: dotted;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Ein Beispiel für dotted border-style.</p>
  </body>
</html>

Wie Sie im vorliegenden Beispiel sehen können, haben alle Seiten den gleichen Wert.

Jetzt sehen wir ein Beispiel, wo jede Seite ihren eigenen Wert hat.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
        p {
      border-width: 4px;
      border-style: double solid dashed dotted;
      border-color: #1c87c9;
      color: #8ebf42;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Ein Beispiel, wo jede Seite ihren eigenen Wert hat</p>
  </body>
</html>

Lassen Sie uns ein anderes Beispiel sehen, wo alle vier Werte verwendet werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>
    <h2>Ein Beispiel für border-style</h2>
    <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>

Werte

Wert Beschreibung
none Es zeigt keine Grenzen. Standardwert.
hidden Das gleiche wie "none", außer bei der Lösung von Grenzkonflikten für Tabellenelemente.
dotted Der Rahmen wird als eine Reihe von Punkten angegeben.
dashed Der Rahmen wird als eine Reihe von Bindestrichen angegeben.
solid Der Rand wird als durchgezogene Linien angegeben.
double Der Rand wird als doppelte durchgezogene Linien angegeben.
groove Es ist ein 3D gerillter Rand und macht den Eindruck, dass der Rand geschnitzt ist. Gegenteil von ridge.
ridge Es spezifiziert einen 3D-Rand und vermittelt den Eindruck eines extrudierten Aussehens. Gegenteil von groove.
inset Es ist ein 3D-Effekt, der den Eindruck macht, dass das Element eingebettet erscheint. Gegenteil von outset.
outset Es ist ein 3D-Effekt, der den Eindruck macht, dass das Element geprägt erscheint. Gegenteil von inset.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Welche Arten von CSS Border-Style sind vorhanden laut w3docs.com?
Finden Sie das nützlich?