CSS border-right-width-Eigenschaft
Die border-right-width-Eigenschaft wird verwendet, um die Breite des rechten Rahmens eines Elements festzulegen. Die Breite des rechten Rahmens sowie aller anderen Rahmenkanten kann auch über die Kurzschreibweisen border oder border-width definiert werden.
Um border-right-width festzulegen, sollten Sie zuerst die border-style-Eigenschaft definieren, da Sie einen Rahmen benötigen, bevor Sie dessen Breite festlegen. Die border-right-style- oder border-style-Eigenschaft kann verwendet werden, um den Stil des Rahmens anzugeben.
INFO
Die Spezifikation definiert nicht die genaue Dicke jedes Schlüsselworts. Sie folgen jedoch immer dieser Reihenfolge: thin ≤ medium ≤ thick.
INFO
Die Spezifikation definiert nicht, wie Rahmen unterschiedlicher Breite und Stile in den Ecken verbunden werden.
| Anfangswert | medium |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Ja. Die Breite des Rahmens ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderRightWidth = "5px"; |
Syntax
Syntax der CSS border-right-width-Eigenschaft
border-right-width: medium | thin | thick | length | initial | inherit;Beispiel für die border-right-Eigenschaft:
Beispiel der CSS border-right-width-Eigenschaft mit dem Wert thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
width: 50%;
border-style: dotted;
border-right-width: thick;
}
</style>
</head>
<body>
<h2>Border-right-width example</h2>
<p>As you can see the width of the right border is set to thick.</p>
</body>
</html>Beispiel für die border-right-Eigenschaft mit allen Werten:
Beispiel der CSS border-right-width-Eigenschaft mit den Werten medium, thin, thick, px, initial und inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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>
<h1>Border-right-width value examples</h1>
<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>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| medium | Definiert einen mittleren rechten Rahmen. Dies ist der Standardwert dieser Eigenschaft. | Ausführen » |
| thin | Definiert einen dünnen rechten Rahmen. Die genaue Breite bleibt dem Benutzeragenten überlassen. | Ausführen » |
| thick | Definiert einen dicken rechten Rahmen. Die genaue Breite bleibt dem Benutzeragenten überlassen. | Ausführen » |
| length | Definiert die Längenangabe der Dicke des rechten Rahmens. Zum Beispiel 10px, 5em, 8pt usw. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Praxis
Was gibt die CSS-Eigenschaft 'border-right-width' an?