CSS border-top-width Eigenschaft
Die border-top-width-Eigenschaft legt die Breite des oberen Rahmens eines Elements fest. Alle Eigenschaftswerte mit Beispielen veranschaulicht.
Die CSS-Eigenschaft border-top-width legt die Breite (Stärke) des oberen Rahmens eines Elements fest. Sie steuert nur die obere Kante und ist daher nützlich, wenn der obere Rahmen dicker oder dünner sein soll als die anderen drei Seiten – zum Beispiel eine breite Akzentlinie über einer Karte oder einem Abschnitt.
Die Breite des oberen Rahmens kann auf zwei Arten festgelegt werden:
- Direkt mit der Langform
border-top-width, wenn sich nur die obere Kante unterscheidet. - Als Teil einer Kurzschreibweise mit border oder border-width, wenn mehrere Seiten gleichzeitig gesetzt werden sollen.
border-top-width hat nur dann einen sichtbaren Effekt, wenn ein Rahmenstil festgelegt ist. Standardmäßig ist der Rahmenstil none, was bedeutet, dass ein Rahmen mit beliebiger Breite nichts anzeigt. Es muss daher zunächst ein Stil mit border-style oder border-top-style deklariert werden, und dieser Stil darf nicht none oder hidden sein.
/* Without a style the width is ignored — nothing shows */
.box {
border-top-width: thick; /* has no effect on its own */
}
/* Add a style and the width becomes visible */
.box {
border-top-style: solid;
border-top-width: thick;
}Die verwandten Langformen border-right-width, border-bottom-width und border-left-width funktionieren für die anderen Kanten auf dieselbe Weise.
Die Spezifikation legt keine genaue Stärke für die einzelnen Schlüsselwörter fest. Die folgende Reihenfolge gilt jedoch stets: thin ≤ medium ≤ thick.
Die Spezifikation legt nicht fest, wie Rahmen mit unterschiedlichen Stilen und Breiten an den Ecken verbunden werden.
| Standardwert | 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.borderTopWidth = "5px"; |
Syntax
Syntax der CSS border-top-width-Eigenschaft
border-top-width: medium | thin | thick | length | initial | inherit;Beispiel der border-top-width-Eigenschaft:
Beispiel der CSS border-top-width-Eigenschaft mit dem Wert thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
border-style: dotted;
border-top-width: thick;
}
</style>
</head>
<body>
<h2>Border-top-width example</h2>
<p>As you can see the width of the top border is set to thick.</p>
</body>
</html>Ergebnis
![CSS border-top-width Eigenschaft](https://api.w3docs.com/uploads/media/default/0001/03/ff5db94a745edc3bcb963c80df1284fa352d4278.png "border-top-width set to thick on a dotted paragraph" =420x)
Beispiel der border-top-width-Eigenschaft mit allen Werten:
Beispiel der CSS border-top-width-Eigenschaft mit den Werten medium, thin, thick, 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-top-width example classes */
.b1 {
border-top-width: medium;
}
.b2 {
border-top-width: thin;
}
.b3 {
border-top-width: thick;
}
.b4 {
border-top-width: 10px;
}
.b5 {
border-top-width: initial;
}
.b6 {
border-top-width: inherit;
}
</style>
</head>
<body>
<h1>Border-top-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 length
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Werte
| Wert | Beschreibungen | Ausprobieren |
|---|---|---|
| medium | Definiert einen mittleren oberen Rahmen. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| thin | Definiert einen dünnen oberen Rahmen. Die genaue Breite wird vom User-Agent bestimmt. | Ausprobieren » |
| thick | Definiert einen dicken oberen Rahmen. Die genaue Breite wird vom User-Agent bestimmt. | Ausprobieren » |
| length | Definiert die Stärke des oberen Rahmens (z. B. 10px, 5em, 8pt). Prozentwerte werden nicht unterstützt. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Schlüsselwörter vs. Längenwerte
Die Breite kann als eines von drei Schlüsselwörtern (thin, medium, thick) oder als explizite Länge angegeben werden. Die Schlüsselwörter sind praktisch, aber ungenau: Die CSS-Spezifikation legt keine genaue Pixelgröße fest, sondern nur die Reihenfolge thin ≤ medium ≤ thick. Die meisten Browser rendern sie ungefähr als 1px, 3px und 5px, darauf sollte man sich jedoch nicht verlassen.
Verwende eine explizite Länge (1px, 0.25em, 3pt), wenn eine vorhersehbare und browserübergreifend konsistente Stärke benötigt wird. Zu beachten ist, dass Prozentwerte für Rahmenbreiten nicht erlaubt sind und negative Längen ungültig sind.
Wichtige Hinweise
- Kein sichtbarer Rahmen ohne Stil. Der häufigste Fehler ist, nur die Breite festzulegen und
border-top-stylezu vergessen. Mit dem Standard-Stilnonewird der Rahmen schlicht nicht angezeigt. initialvs.inherit.initialsetzt die Breite auf den angegebenen Standardwert (medium) zurück, währendinheritdie berechnete Breite des übergeordneten Elements übernimmt.- Breite beeinflusst das Layout. Ein breiterer Rahmen vergrößert die gerenderte Größe des Elements, es sei denn, box-sizing ist auf
border-boxgesetzt, wodurch die deklarierte Breite/Höhe fest bleibt und der Rahmen nach innen absorbiert wird. - Ecken. Die Spezifikation legt nicht fest, wie Rahmen mit unterschiedlichen Breiten oder Stilen an einer Ecke verbunden werden, sodass ein breiter oberer Rahmen, der auf einen dünnen seitlichen Rahmen trifft, in verschiedenen Browsern leicht unterschiedlich aussehen kann.