CSS-Eigenschaft border-right-width

Die Eigenschaft border-right-width wird verwendet, um die Breite des rechten Randes eines Elements zu definieren.

Die rechte Rahmenbreite, sowie alle anderen Rahmenseiten, können auch mit den Shorthand-Eigenschaften border oder border-width definiert werden.

Um die Eigenschaft border-right-width einzustellen, sollen Sie zunächst die Eigenschaft border-style definieren, da Sie Grenzen benötigen, bevor Sie deren Breite einstellen. Sie können entweder border-right-style oder border-style verwenden, um den Stil des Rahmens festzulegen.

Die Spezifikation definiert die genaue Dicke jedes Schlüsselwortes nicht. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.
Die Spezifikation definiert nicht, wie sich die Grenzen unterschiedlicher Breite und Stile in den Ecken verbinden.
Anfangswert medium
Gilt für Alle Elemente. Es gilt auch für ::first-letter.
Geerbt Nein
Animierbar Ja, die Breite des Rahmens ist animierbar.
Version CSS1
DOM Syntax object.style.borderRightWidth = "5px";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      padding: 8px;    
      width: 50%;         
      border-style: dotted;
      border-right-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Border-right-width</h2>
    <p>Wie Sie sehen können, ist die Breite des rechten Randes auf thick eingestellt.</p>
  </body>
</html>

Betrachten wir ein weiteres Beispiel, wo alle Eigenschaftswerte verwendet wurden:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>
    <h2>Ein Beispiel für border-right-width mit Werten</h2>
    <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 lenght
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
    </div>
    </main>
  </body>
</html>

Werte

Wert Beschreibung
medium Es definiert den mittleren rechten Rand. Es ist der Standardwert dieser Eigenschaft.
thin Es definiert einen dünnen rechten Rand. Es liegt an dem Benutzeragenten, die genaue Breite zu bestimmen.
thick Es definiert einen dicken rechten Rand. Es liegt an dem Benutzeragenten, die genaue Breite zu bestimmen.
length Definiert die Dicke der Länge des rechten Randes. Zum Beispiel 10px, 5em, 8pt usw.
initial Es setzt die Eigenschaft auf den Standardwert.
inherit Es erzeugt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

1+ 1+ 1+ 3.5+


Finden Sie das nützlich?

Ähnliche Artikel