CSS border-width-Eigenschaft
Die CSS-Eigenschaft border-width legt die Breite des Rahmens eines Elements fest. Sie gilt gleichzeitig für alle vier Seiten. Sie können die Breite für jede Seite auch einzeln mit den folgenden Einzelleigenschaften festlegen:
- border-top-width, die die Breite des oberen Rahmens eines Elements definiert.
- border-left-width, die die Breite des linken Rahmens eines Elements definiert.
- border-right-width, die die Breite des rechten Rahmens eines Elements definiert.
- border-bottom-width, die die Breite des unteren Rahmens eines Elements definiert.
INFO
Die Eigenschaft border-style hat standardmäßig den Wert none. Wenn Sie keinen Rahmenstil angeben, ist die Rahmenbreite nicht sichtbar.
Diese Eigenschaft akzeptiert ein bis vier Werte. Ein einzelner Wert gilt für alle vier Seiten. Zwei Werte gelten jeweils für die Seiten oben/unten und links/rechts. Drei Werte gelten für die Seiten oben, links/rechts und unten. Vier Werte gelten in der Reihenfolge oben, rechts, unten und links.
| Anfangswert | medium |
|---|---|
| Vererbt | Nein |
| Animierbar | Ja. Die Breite des Rahmens ist animierbar. |
| Version | CSS1 |
| JavaScript-Syntax | object.style.borderWidth = "1px 5px"; |
Syntax
Syntax der CSS border-width-Eigenschaft
border-width: <line-width>{1,4} | initial | inherit;Beispiel für die border-width-Eigenschaft:
Beispiel für die CSS border-width-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px;
padding: 5px;
}
</style>
</head>
<body>
<p>This paragraph's border width is set to 1px.</p>
</body>
</html>Beispiel für die border-width-Eigenschaft mit drei Werten:
Beispiel für die CSS border-width-Eigenschaft mit px- und medium-Werten
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: #666;
padding: 5px;
border-style: solid;
}
.thin {
border-width: 1px;
}
.medium {
border-width: medium;
}
.thick {
border-width: 10px;
}
</style>
</head>
<body>
<p class="thin">This paragraph's border width is set to 1px.</p>
<p class="medium">This paragraph's border width is set to medium.</p>
<p class="thick">This paragraph's border width is set to 10px.</p>
</body>
</html>Ergebnis
Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| medium | Definiert einen mittleren Rahmen. Dies ist der Standardwert. (Relatives Schlüsselwort mit browserdefinierten Pixelwerten.) | Testen » |
| thin | Definiert einen dünnen Rahmen. | Testen » |
| thick | Definiert einen dicken Rahmen. | Testen » |
| length | Definiert die Dicke des Rahmens. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche der folgenden Werte können verwendet werden, um die Breite von CSS-Rahmen anzugeben?