W3docs
de
Anmelden

CSS border-right Eigenschaft

Die CSS-Eigenschaft border-right legt Breite, Stil und Farbe des rechten Rahmens fest. Syntax, Werte und Beispiele.

Die CSS-Eigenschaft border-right legt die Breite, den Linienstil und die Farbe des rechten Rahmens eines Elements fest. Sie ist eine Kurzschreibweise, mit der sich drei separate Eigenschaften in einer einzigen Deklaration setzen lassen:

Statt drei Regeln zu schreiben, genügt eine:

/* shorthand */
border-right: 3px solid #1c87c9;

/* equivalent longhand */
border-right-width: 3px;
border-right-style: solid;
border-right-color: #1c87c9;

Die drei Werte können in beliebiger Reihenfolge angegeben werden, und einer oder zwei davon dürfen weggelassen werden. Wird ein Wert ausgelassen, gilt sein Standardwert:

  • Wird der Stil weggelassen, wird kein Rahmen gerendert — border-right-style hat den Standardwert none. Deshalb muss immer ein Stil angegeben werden, damit ein Rahmen sichtbar ist.
  • Wird die Breite weggelassen, ist der Standardwert medium.
  • Wird die Farbe weggelassen, übernimmt der Rahmen den color-Wert des Elements; ist dieser ebenfalls nicht gesetzt, fällt er auf die aktuelle Textfarbe zurück (standardmäßig Schwarz).

Wann border-right verwenden

Verwenden Sie border-right, wenn Sie nur auf einer Seite einer Box eine Linie benötigen — zum Beispiel als vertikalen Trenner zwischen einer Seitenleiste und dem Hauptinhalt, als dekoratives Akzent auf einer Karte oder als gedrehten Unterstrich-Trenner in einer Spalte. Wenn Sie auf allen vier Seiten denselben Rahmen benötigen, verwenden Sie stattdessen die Kurzschreibweise border; für die anderen Einzelseiten siehe border-left, border-top und border-bottom.

Standardwertmedium none currentColor
Anwendbar aufAlle Elemente. Gilt auch für ::first-letter.
VererbtNein
AnimierbarJa. Breite und Farbe sind animierbar.
VersionCSS1
DOM-Syntaxobject.style.borderRight = "1px solid black";

Syntax

Syntax der CSS-Eigenschaft border-right

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

Beispiel der border-right-Eigenschaft:

Beispiel der CSS-Eigenschaft border-right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border-right: 5px solid #1c87c9;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Border-right example</h2>
    <div> This is a simple example for the border-right property.</div>
  </body>
</html>
Probier es selbst »

Ergebnis

![CSS border-right Eigenschaft](/uploads/media/default/0001/03/4218a03bd607afbe39ebf9286536c0c363499170.png "CSS border-right example" =420x)

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

Beispiel der border-right-Eigenschaft mit mehreren Werten:

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

<!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>A heading with a solid green right border</h1>
    <p>A heading with a dotted blue right border.</p>
    <div>A div element with a thick double right border.</div>
  </body>
</html>
Probier es selbst »

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

Beispiel für die Verwendung von border-right zum Erstellen einer ansprechenden Box:

Beispiel der CSS-Eigenschaft border-right mit der Eigenschaft solid

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 300px;
        height: 80px;
        text-align: center;
        padding: 20px;
        background: #ccc;
        border-right: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <div>This box has a solid border on the right side.</div>
  </body>
</html>
Probier es selbst »

Tipps und Hinweise

  • Immer einen Stil angeben. border-right: 2px #1c87c9; zeigt nichts, weil der Stil standardmäßig none ist. Fügen Sie ein Schlüsselwort wie solid hinzu.
  • Die Reihenfolge ist flexibel. border-right: solid 5px red; und border-right: 5px solid red; sind gleichwertig.
  • Die Kurzschreibweise setzt weggelassene Teile zurück. border-right: 5px solid; setzt die Farbe auf die aktuelle Textfarbe zurück, auch wenn zuvor border-right-color gesetzt wurde. Verwenden Sie die Langschreibweise, wenn Sie nur einen Teil ändern möchten, ohne die anderen zu beeinflussen.
  • Rahmen vergrößern die Layout-Größe, sofern nicht box-sizing: border-box gesetzt ist, da das Standard-content-box die Rahmenbreite zur Gesamtbreite des Elements addiert.

Werte

Die Kurzschreibweise akzeptiert die Werte ihrer drei Langschreib-Eigenschaften sowie die CSS-weiten Schlüsselwörter:

WertBeschreibung
border-right-widthLegt die Breite des rechten Rahmens eines Elements fest. Der Standardwert ist "medium". Pflichtangabe.
border-right-styleLegt den Linienstil des rechten Rahmens eines Elements fest. Der Standardwert ist "none". Pflichtangabe.
border-right-colorLegt die Farbe des rechten Rahmens eines Elements fest. Der Standardwert ist die aktuelle Textfarbe.
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Übung

Übung
Welche Attribute können Sie bei der Arbeit mit der border-right-Eigenschaft in CSS angeben?
Welche Attribute können Sie bei der Arbeit mit der border-right-Eigenschaft in CSS angeben?

Verwandte Eigenschaften

Was this page helpful?