CSS border-right-style-Eigenschaft

Die CSS-Eigenschaft border-right-style wird verwendet, um den Stil des rechten Randes eines Elements festzulegen. Sie wird als einzelnes Schlüsselwort definiert, das aus den für die Eigenschaft border-style verfügbaren Werten ausgewählt wird. Die border-style-Eigenschaft wird verwendet, um den Stil für alle vier Seiten eines Elements festzulegen, während border-right-style nur einen Stil für den rechten Rand festlegt.

Die Standardbreite des rechten Randes beträgt medium. Sie kann durch Verwendung der Eigenschaften border-right-width oder border-width geändert werden.

Nicht alle Browser rendern die Stile auf die gleiche Weise. Chrome rendert die Punkte derzeit rechteckig und nicht kreisförmig.

INFO

Die Spezifikation legt nicht fest, wie viel Abstand zwischen den Punkten und den Strichen sein soll.

INFO

Die Spezifikation definiert nicht, wie sich Ränder unterschiedlicher Stile in den Ecken verbinden.

Anfangswert	none
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbbar	Nein
Animierbar	Nein
Version	CSS1
DOM-Syntax	object.style.borderRightStyle = "dashed";

Syntax

Syntax der CSS border-right-style-Eigenschaft

css

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

Beispiel für die border-right-style-Eigenschaft:

Beispiel der CSS border-right-style-Eigenschaft mit solid- und dotted-Werten

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        border-right-style: solid;
      }
      p {
        border-right-style: dotted;
      }
    </style>
  </head>
  <body>
    <h2>A Heading with solid border-right-style.</h2>
    <p>A paragraph with dotted border-right-style.</p>
  </body>
</html>

Try it Yourself »

Sehen Sie sich ein Beispiel an, in dem alle Stilwerte verwendet werden, um den Unterschied zwischen ihnen zu sehen:

INFO

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

Beispiel der border-right-style-Eigenschaft mit allen Werten:

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

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>
    <h1>Border-right-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>

Try it Yourself »

Ergebnis

CSS border-right-style-Eigenschaft

Werte

Wert	Beschreibung	Ausführen
none	Definiert, dass kein Rand vorhanden ist. Standardwert.	Ausführen »
hidden	Entspricht „none“, außer bei der Auflösung von Randkonflikten bei Tabellenelementen.	Ausführen »
dotted	Definiert einen gepunkteten Rand.	Ausführen »
dashed	Definiert einen gestrichelten Rand.	Ausführen »
double	Definiert einen doppelten Rand.	Ausführen »
solid	Definiert einen durchgehenden Rand.	Ausführen »
groove	Definiert einen 3D-Nut-Rand. Sein Effekt kann mit dem Wert von border-color geändert werden.	Ausführen »
ridge	Definiert einen 3D-Kamm-Rand. Sein Effekt kann mit dem Wert von border-color geändert werden.	Ausführen »
inset	Definiert einen 3D-Einschnitt-Rand. Sein Effekt kann mit dem Wert von border-color geändert werden.	Ausführen »
outset	Definiert einen 3D-Vorsprung-Rand. Sein Effekt kann mit dem Wert von border-color geändert werden.	Ausführen »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausführen »
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

CSS border-right-style-Eigenschaft ​

Syntax ​

Beispiel für die border-right-style-Eigenschaft: ​

Beispiel der border-right-style-Eigenschaft mit allen Werten: ​

Ergebnis ​

Werte ​

Praxis ​

CSS border-right-style-Eigenschaft

Syntax

Beispiel für die border-right-style-Eigenschaft:

Beispiel der border-right-style-Eigenschaft mit allen Werten:

Ergebnis

Werte

Praxis