CSS-Eigenschaft border-right

❮ Vorige Nächste ❯

Die CSS-Eigenschaft border-right wird verwendet, um Breite, Linienstil und Farbe des linken Randes von Elementen einzustellen. Es ist eine Kurzform für die Angabe der Werte von border-right-width, border-right-style und border-right-color.

Diese drei Werte der Shorthand-Eigenschaft können in beliebiger Reihenfolge angegeben werden, und ein oder zwei von ihnen können übersehen werden.

Wenn keine Farbe angegeben ist, wird der Wert aus der Eigenschaft color übernommen. Wenn die Eigenschaft color nicht definiert ist, wird voreingestellt die schwarze Farbe verwendet.

Wenn width nicht angegeben ist, wird die mittlere Größe des Elements verwendet.

Standardwert	medium none currentColor
Gilt für	Alle Elemente. Es gilt auch für ::first-letter.
Geerbt	Nein
Animierbar	Ja. Die Breite und Farbe des Rahmens sind animierbar.
Version	CSS1
DOM Syntax	object.style.borderRight = "1px solid black";

Syntax

border-right: border-width border-style border-color | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      border-right: 5px solid #1c87c9;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für Border-right</h2>
    <div> Das ist ein einfaches Beispiel für die Eigenschaft border-right.</div>
  </body>
</html>

Versuch es selber!

Die Eigenschaft border-right kann auf verschiedene Elemente angewendet werden und kann verschiedene Stilwerte haben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1, p, div {
      padding: 10px;
      }
      h1 {
      border-right: 7px solid #8ebf42;
      }
      p {
      border-right: 5px dotted #1c87c9;
      }
      div {
      border-right: thick double #666;
      }
    </style>
  </head>
  <body>
    <h1>Eine Überschrift mit einem durchgehend grünen rechten Rand</h1>
    <p>Eine Überschrift mit einem gestrichelten blauen rechten Rand.</p>
    <div>Ein Element div mit einem dicken doppelten rechten Rand.</div>
  </body>
</html>

Versuch es selber!

Sie können auch eine Box mit dem Element <div> erstellen und background-color für Ihre Box festlegen, dann einen rechten Rand hinzufügen, um eine ausgefallene Box zu haben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div {
      width: 300px;
      height: 80px;
      text-align: center;
      padding: 20px;
      background: #ccc;
      border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>Diese Box hat auf der rechten Seite einen massiven Rand.</div>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
border-right-width	Es definiert die rechte Rahmenbreite eines Elements. Der Standardwert ist "medium". Obligatorischer Wert.
border-right-style	Es definiert den Linienstil des rechten Randes eines Elements. Der Standardwert ist "none". Obligatorischer Wert.
border-right-color	>Es definiert die Farbe des rechten Randes eines Elements. Der Standardwert ist die aktuelle Farbe des Textes.
initial	Es setzt die Eigenschaft auf den Standardwert.
inherit	Es erzeugt die Eigenschaft von ihrem übergeordneten Element.