CSS border-right-Eigenschaft
Die CSS border-right-Eigenschaft legt die Breite, die Linienart und die Farbe des rechten Randes von Elementen fest. Sie ist eine Shorthand-Eigenschaft (Zusammenfassungseigenschaft) zur Angabe der Werte der folgenden Eigenschaften:
Diese drei Werte der Shorthand-Eigenschaft können in beliebiger Reihenfolge angegeben werden, wobei einer oder zwei von ihnen fehlen dürfen.
Der Wert wird aus der color-Eigenschaft übernommen, falls die Farbe nicht angegeben wird. Falls die color-Eigenschaft nicht definiert ist, wird standardmäßig Schwarz verwendet.
Wenn die width nicht angegeben wird, wird die mittlere Größe des Elements verwendet.
| Standardwert | medium none currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Ja. Breite und Farbe sind animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderRight = "1px solid black"; |
Syntax
Syntax der CSS border-right-Eigenschaft
border-right: border-width border-style border-color | initial | inherit;Beispiel für die border-right-Eigenschaft:
Beispiel für die CSS border-right-Eigenschaft
<!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>Ergebnis
Die border-right-Eigenschaft kann auf verschiedene Elemente angewendet werden und verschiedene Stilwerte annehmen.
Beispiel für die border-right-Eigenschaft mit mehreren Werten:
Beispiel für die CSS border-right-Eigenschaft mit solid, dotted und double Werten
<!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>Sie können auch eine Box mit dem <div>-Element erstellen und eine background-color für Ihre Box festlegen, um anschließend einen rechten Rand hinzuzufügen und eine stilvolle Box zu erhalten.
Beispiel zur Verwendung der border-right-Eigenschaft zum Erstellen einer stilvollen Box:
Beispiel für die CSS border-right-Eigenschaft mit solid-Eigenschaft
<!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>Werte
| Wert | Beschreibung |
|---|---|
| border-right-width | Legt die Breite des rechten Randes eines Elements fest. Der Standardwert ist „medium“. Erforderlicher Wert. |
| border-right-style | Legt die Linienart des rechten Randes eines Elements fest. Der Standardwert ist „none“. Erforderlicher Wert. |
| border-right-color | Legt die Farbe des rechten Randes eines Elements fest. Der Standardwert ist die aktuelle Textfarbe. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Welche Attribute können Sie bei der Arbeit mit der border-right-Eigenschaft in CSS angeben?