W3docs
de
Anmelden

CSS border-right-style Eigenschaft

Die CSS border-right-style Eigenschaft legt den Stil des rechten Rahmens eines Elements fest. Alle Werte mit Beispielen erklärt.

Die CSS border-right-style Eigenschaft legt den Linienstil des rechten Rahmens eines Elements fest, zum Beispiel solid, dashed oder dotted. Der Wert ist ein einzelnes Schlüsselwort aus derselben Wertemenge wie bei der border-style-Kurzschreibweise — der Unterschied besteht darin, dass border-style alle vier Seiten gleichzeitig gestaltet, während border-right-style nur die rechte Seite betrifft.

Dies ist die seitenspezifische Entsprechung von border-style. Verwenden Sie diese Eigenschaft, wenn die rechte Seite einen anderen Linienstil haben soll als die übrigen Seiten — zum Beispiel ein durchgehender Trenner auf der rechten Seite einer Seitenleiste, während oben, unten und links kein Rahmen angezeigt wird.

Warum der Rahmen möglicherweise nicht erscheint

Ein Rahmen besteht aus drei unabhängigen Teilen: Stil, Breite und Farbe. Der Stil ist der einzige Pflichtbestandteil — wird kein Stil festgelegt, verwendet der Browser den Standardwert none und zeichnet keinen Rahmen, unabhängig davon, welche Breite oder Farbe angegeben wurde. Daher ist border-right-style das, was den rechten Rahmen tatsächlich sichtbar macht.

Die Standardbreite des rechten Rahmens ist medium. Passen Sie diese mit border-right-width oder border-width an und legen Sie die Farbe mit border-right-color fest. Um Stil, Breite und Farbe in einer einzigen Deklaration festzulegen, verwenden Sie die Kurzschreibweise border-right.

Nicht alle Browser rendern die Stile identisch. Chrome beispielsweise stellt dotted-Punkte als kleine Quadrate statt als Kreise dar, und der genaue Abstand zwischen Punkten und Strichen liegt im Ermessen des Browsers.

Info

Die Spezifikation legt den Abstand zwischen den Punkten und Strichen nicht fest.

Info

Die Spezifikation definiert nicht, wie Rahmen unterschiedlicher Stile in den Ecken verbunden werden.

Anfangswertnone
Gilt fürAlle Elemente. Gilt auch für ::first-letter.
VererbbarNein
AnimierbarNein
VersionCSS1
DOM-Syntaxobject.style.borderRightStyle = "dashed";

Syntax

Syntax der CSS border-right-style Eigenschaft

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

Beispiel der border-right-style Eigenschaft:

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

<!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>
Probier es selbst »

Sehen Sie sich ein Beispiel an, bei dem alle Stilwerte verwendet werden, um die Unterschiede zwischen ihnen zu verdeutlichen:

Info

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

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

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

<!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>
Probier es selbst »

Ergebnis

CSS border-right-style Eigenschaft

Werte

WertBeschreibungAusprobieren
noneLegt fest, dass kein Rahmen angezeigt wird. Standardwert.Ausprobieren »
hiddenEntspricht „none", außer bei der Rahmenkonfliktauflösung in Tabellenelementen.Ausprobieren »
dottedDefiniert einen gepunkteten Rahmen.Ausprobieren »
dashedDefiniert einen gestrichelten Rahmen.Ausprobieren »
doubleDefiniert einen doppelten Rahmen.Ausprobieren »
solidDefiniert einen durchgehenden Rahmen.Ausprobieren »
grooveDefiniert einen 3D-gerillten Rahmen. Der Effekt kann durch den Wert von border-color verändert werden.Ausprobieren »
ridgeDefiniert einen 3D-erhabenen Rahmen. Der Effekt kann durch den Wert von border-color verändert werden.Ausprobieren »
insetDefiniert einen 3D-eingesenkten Rahmen. Der Effekt kann durch den Wert von border-color verändert werden.Ausprobieren »
outsetDefiniert einen 3D-hervorstehenden Rahmen. Der Effekt kann durch den Wert von border-color verändert werden.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

none vs hidden

Die beiden Schlüsselwörter sehen bei normalen Elementen gleich aus — beide zeichnen keine Linie. Der Unterschied zeigt sich nur bei Tabellen mit zusammengefasstem Rahmen: Bei border-collapse: collapse gewinnt ein hidden-Rahmen die Rahmenkonfliktauflösung und unterdrückt den Rahmen der benachbarten Zelle, während none die niedrigste Priorität hat und von jedem benachbarten Rahmen überschrieben wird.

Verwandte Eigenschaften

Übung

Übung
Welche der folgenden Werte sind gültige Werte für die 'border-right-style'-Eigenschaft in CSS?
Welche der folgenden Werte sind gültige Werte für die 'border-right-style'-Eigenschaft in CSS?
Was this page helpful?