CSS-Eigenschaft border-style

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.