CSS border-right-width Eigenschaft

Die CSS-Eigenschaft border-right-width legt die Breite (Stärke) ausschließlich des rechten Rahmens eines Elements fest. Sie steuert nur eine Seite, was sie nützlich macht, wenn ein asymmetrischer Rahmen gewünscht ist — zum Beispiel eine breite Akzentlinie auf der rechten Seite einer Seitenleiste oder eines Zitat-Blocks, während die anderen drei Seiten dünn oder gar nicht vorhanden sind.

Die Breite des rechten Rahmens kann auch über die Kurzschreibweise border oder border-width gesetzt werden. Verwenden Sie border-right-width, wenn Sie gezielt eine Seite überschreiben oder anpassen möchten, ohne die anderen zu verändern.

Warum zuerst ein Rahmenstil erforderlich ist

Ein Rahmen hat keine sichtbare Breite, wenn er keinen Stil besitzt. Wird border-right-width gesetzt, aber der rechte Rahmenstil bleibt auf dem Standardwert (none), wird nichts dargestellt — ein none-Rahmen kollabiert auf null, unabhängig von der angegebenen Breite. Deklarieren Sie daher immer zuerst einen Stil mit border-right-style, border-style oder der Kurzschreibweise border. Um auch die Farbe zu setzen, siehe border-right-color.

/* Width alone does nothing — there is no style to give it a width. */
.broken {
  border-right-width: 8px;
}

/* Style + width — now the 8px right border is visible. */
.works {
  border-right-style: solid;
  border-right-width: 8px;
}

Info

Die Spezifikation definiert nicht die genaue Stärke der einzelnen Schlüsselwörter. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.

Info

Die Spezifikation definiert nicht, wie Rahmen unterschiedlicher Breite und Stile an den Ecken verbunden werden.

Anfangswert	medium
Gilt für	Alle Elemente. Gilt auch für ::first-letter.
Vererbbar	Nein
Animierbar	Ja. Die Breite des Rahmens ist animierbar.
Version	CSS1
DOM Syntax	object.style.borderRightWidth = "5px";

Syntax

Syntax der CSS border-right-width-Eigenschaft

border-right-width: medium | thin | thick | length | initial | inherit;

Beispiel der border-right-width-Eigenschaft:

Beispiel der CSS border-right-width-Eigenschaft mit dem Wert thick

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        padding: 8px;
        width: 50%;
        border-style: dotted;
        border-right-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Border-right-width example</h2>
    <p>As you can see the width of the right border is set to thick.</p>
  </body>
</html>

Probier es selbst »

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

Beispiel der CSS border-right-width-Eigenschaft mit den Werten medium, thin, thick, px, initial und inherit

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background: #ccc;
        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;
        border: solid;
      }
      .flex-center {
        display: flex;
        justify-content: center;
      }
      /* border-right-width example classes */
      .b1 {
        border-right-width: medium;
      }
      .b2 {
        border-right-width: thin;
      }
      .b3 {
        border-right-width: thick;
      }
      .b4 {
        border-right-width: 10px;
      }
      .b5 {
        border-right-width: initial;
      }
      .b6 {
        border-right-width: inherit;
      }
    </style>
  </head>
  <body>
    <h1>Border-right-width value examples</h1>
    <main class="flex-center">
      <div class="b1">
        medium
      </div>
      <div class="b2">
        thin
      </div>
      <div class="b3">
        thick
      </div>
    </main>
    <main class="flex-center">
      <div class="b4">
        10px length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Probier es selbst »

Ergebnis

![CSS border-right-width Eigenschaft](/uploads/media/default/0001/03/ed2548511ad8d4ee5076d931f7bb68eeb452cec5.png "CSS border-right-width Property" =420x)

Werte

Wert	Beschreibung	Ausprobieren
medium	Definiert einen mittelbreiten rechten Rahmen. Dies ist der Standardwert der Eigenschaft.	Play it »
thin	Definiert einen dünnen rechten Rahmen. Die genaue Breite wird vom User Agent bestimmt.	Play it »
thick	Definiert einen breiten rechten Rahmen. Die genaue Breite wird vom User Agent bestimmt.	Play it »
length	Definiert die Stärke des rechten Rahmens als explizite Längenangabe, z. B. 10px, 5em, 8pt usw. Negative Werte sind nicht zulässig.	Play it »
initial	Setzt die Eigenschaft auf ihren Standardwert.	Play it »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was legt die CSS-Eigenschaft 'border-right-width' fest?

Sie legt die Farbe des rechten Rahmens fest.Sie legt die Breite des rechten Rahmens fest.Sie legt den Stil des rechten Rahmens fest.Sie legt die Größe des rechten Außenabstands fest.