CSS border-width Eigenschaft
CSS border-width ist eine Kurzschreibweise, mit der die Breite aller vier Seiten eines Rahmens festgelegt werden kann. Mit Beispielen zum Ausprobieren.
Die CSS-Eigenschaft border-width legt die Breite (Stärke) des Rahmens eines Elements fest. Sie ist eine Kurzschreibweise, die gleichzeitig auf alle vier Seiten angewendet wird, und sie ist die Breitenkomponente der übergeordneten border-Kurzschreibweise.
Jede Seite kann einzeln mit den Langform-Eigenschaften festgelegt werden:
- border-top-width legt die Breite des oberen Rahmens fest.
- border-right-width legt die Breite des rechten Rahmens fest.
- border-bottom-width legt die Breite des unteren Rahmens fest.
- border-left-width legt die Breite des linken Rahmens fest.
Ein Rahmen wird nur gezeichnet, wenn border-style auf etwas anderes als den Standardwert none gesetzt ist. Wenn Sie border-width ohne einen Rahmenstil angeben, bleibt der Rahmen unsichtbar — dies ist der häufigste Grund, warum ein Rahmen "nicht funktioniert."
Wie die Kurzschreibweise Werte auf Seiten abbildet
border-width akzeptiert ein bis vier Werte, und die Anzahl der angegebenen Werte bestimmt, auf welche Seiten sie angewendet werden:
| Angegebene Werte | Oben | Rechts | Unten | Links |
|---|---|---|---|---|
border-width: a | a | a | a | a |
border-width: a b | a | b | a | b |
border-width: a b c | a | b | c | b |
border-width: a b c d | a | b | c | d |
Die Vier-Wert-Form folgt der im Uhrzeigersinn verlaufenden Reihenfolge oben → rechts → unten → links, die von jeder CSS-Box-Kurzschreibweise verwendet wird (dieselbe Reihenfolge wie bei margin und padding).
Jeder Wert ist ein <line-width>: entweder eine Längenangabe (px, em, rem usw.) oder eines der Schlüsselwörter thin, medium oder thick. Prozentwerte sind nicht erlaubt.
| Anfangswert | medium |
|---|---|
| Vererbbar | Nein |
| Animierbar | Ja. Die Rahmenbreite ist animierbar. |
| Version | CSS1 |
| JavaScript-Syntax | object.style.borderWidth = "1px 5px"; |
Syntax
border-width: <line-width>{1,4} | initial | inherit;Ein einzelner Wert (alle vier Seiten)
<!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>Unterschiedliche Breite pro Seite
Hier werden alle drei Schlüsselwortgrößen nebeneinander verglichen, sowie eine Vier-Wert-Box, bei der jede Kante eine andere Stärke erhält.
<!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;
}
.mixed {
/* top right bottom left */
border-width: 2px 8px 12px 24px;
}
</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>
<p class="mixed">Each side has its own width: 2px 8px 12px 24px.</p>
</body>
</html>Ergebnis
Schlüsselwort vs. Längenangabe: Wann was verwenden
- Verwenden Sie eine Längenangabe (
px,em,rem), wenn Sie eine exakte, vorhersehbare Stärke benötigen — dies ist der übliche Fall in realen Layouts. - Verwenden Sie die Schlüsselwörter
thin,mediumundthick, wenn der genaue Pixelwert keine Rolle spielt und Sie dem Browser die Wahl überlassen möchten. Sie entsprechen kleinen, browserdefiniert Pixelwerten (in den meisten Browsern etwa 1px, 3px und 5px, aber die Spezifikation legt sie nicht fest). mediumist der Anfangswert, sodass ein Element mitborder-style: solidund ohneborder-widthbereits einen mittelbreiten Rahmen anzeigt.
Negative Werte sind ungültig und führen dazu, dass die gesamte Deklaration ignoriert wird.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| medium | Definiert einen mittelbreiten Rahmen. Dies ist der Standardwert. (Relatives Schlüsselwort mit browserdefinierten Pixelwerten.) | Ausprobieren » |
| thin | Definiert einen dünnen Rahmen. | Ausprobieren » |
| thick | Definiert einen dicken Rahmen. | Ausprobieren » |
| length | Legt die Stärke des Rahmens fest. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |