CSS-Eigenschaft border-right-style

Die CSS-Eigenschaft border-right-style wird verwendet, um den Stil des rechten Randes eines Elements einzustellen.

Die Eigenschaft border-right-style wird als ein einziges Schlüsselwort angegeben, das aus den für die Eigenschaft border-style verfügbaren ausgewählt wird. Die Eigenschaft border-style wird verwendet, um den Stil für alle vier Seiten eines Elements festzulegen, aber die Eigenschaft border-right-style stellt einen Stil nur für den rechten Rand ein.

Die Standardbreite des rechten Randes ist mittel. Sie kann geändert werden, indem man entweder border-right-width oder border-width verwendet.

Nicht alle Browser rendern die Styles auf die gleiche Weise. Chrom zum Beispiel rendert die Punkte derzeit als rechteckige Punkte, nicht als kreisförmige Punkte.

Die Spezifikation gibt nicht den Abstand zwischen den Punkten und den Strichen an.
Die Spezifikation definiert nicht, wie sich die Grenzen verschiedener Stile in den Ecken verbinden.
Anfangswert none
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Nein
Version CSS1
DOM Syntax object.style.borderRightStyle = "dashed";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
      border-right-style: solid;
      }
      p {
      border-right-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>Eine Überschrift mit solid border-right-style.</h2>
    <p>Ein Absatz mit dotted border-right-style.</p>
  </body>
</html>

Nun sehen wir ein Beispiel, wo alle Style-Werte separat verwendet werden, um den Unterschied zwischen ihnen zu sehen:

Abhängig vom Wert der Eigenschaft border-color, können die Effekte von Werten groove, ridge, inset und outset verändert werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background: #c9c5c5;
      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: #1c87c9;
      border: 10px solid;
      }
      .flex-center {
      display: flex;
      justify-content: center;
      }
      /* border-right-style example classes */
      .b1 { border-right-style: hidden; }
      .b2 {border-right-style: dotted;}
      .b3 {border-right-style: dashed;}
      .b4 {border-right-style: solid;}
      .b5 {border-right-style: double;}
      .b6 {border-right-style: groove;}
      .b7 {border-right-style: ridge;}
      .b8 {border-right-style: inset;}
      .b9 {border-right-style: outset;}
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Border-right-style mit Werten</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 definiert, dass es keinen Rand geben wird.
Standardwert.
hidden Es ist das gleiche mit "none" außer bei der Lösung von Grenzkonflikten für Tabellenelemente.
dotted Es definiert einen verflixten Rahmen.
dashed Es definiert einen gestrichelten Rahmen.
double Es definiert einen doppelten Rahmen.
solid Es definiert einen festen Rahmen.
groove Es definiert einen 3D-Rillenrand. Seine Wirkung kann mit dem Wert border-color geändert werden.
ridge Es definiert einen 3D-Rand mit Rillen. Seine Wirkung kann mit dem Wert border-color geändert werden.
inset Es definiert einen 3D-Einschubrahmen. Seine Wirkung kann mit dem Wert border-color geändert werden.
outset Es definiert einen 3D-Anfangsrahmen. Seine Wirkung kann mit dem Wert border-color geändert werden.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erzeugt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1+ 1+ 1+ 9.2+

Übe dein Wissen

Welche Werte sind für die CSS-Eigenschaft 'border-right-style' gültig?
Finden Sie das nützlich?