border-right

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die border-right Shorthand CSS Eigenschaft setzt alle Eigenschaften des rechten Rahmens eines Elements.

Probieren Sie es aus

Wie bei allen Shorthand-Eigenschaften setzt border-right immer die Werte aller Eigenschaften, die es setzen kann, auch wenn sie nicht spezifiziert sind. Diejenigen, die nicht spezifiziert sind, werden auf ihre Standardwerte gesetzt. Betrachten Sie den folgenden Code:

css
border-right-style: dotted;
border-right: thick green;

Es ist tatsächlich dasselbe wie dieser:

css
border-right-style: dotted;
border-right: none thick green;

Der vor border-right angegebene Wert von border-right-style wird ignoriert. Da der Standardwert von border-right-style none ist, führt das Nichtspezifizieren des border-style-Teils zu keinem Rahmen.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Shorthand für die folgenden CSS-Eigenschaften:

Syntax

css
border-right: 1px;
border-right: 2px dotted;
border-right: medium dashed green;

/* Global values */
border-right: inherit;
border-right: initial;
border-right: revert;
border-right: revert-layer;
border-right: unset;

Die drei Werte der Shorthand-Eigenschaft können in beliebiger Reihenfolge angegeben werden, und einer oder zwei von ihnen können weggelassen werden.

Werte

<br-width>

Siehe border-right-width.

<br-style>

Siehe border-right-style.

<color>

Siehe border-right-color.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter.
VererbtNein
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

border-right = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Beispiele

Anwenden eines rechten Rahmens

HTML

html
<div>This box has a border on the right side.</div>

CSS

css
div {
  border-right: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

Ergebnisse

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# border-shorthands

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch