Die CSS-Eigenschaft border-top-color definiert die Farbe des oberen Randes eines Elements.
Die Farbe des oberen Randes, kombiniert mit den Farben des oberen, rechten und unteren Randes, kann auch mit der Shorthand-Eigenschaft border color definiert werden.
Wenn Sie die Eigenschaft border-top-color verwenden, sollen Sie zunächst die Eigenschaften border-style oder border-top-style einstellen und dann die Farbe des definierten Styles ändern.
Die Standardbreite eines Rahmens ist mittel. Sie können die Breite entweder über die Eigenschaften border-width oder border-top-width festlegen.
| Anfangswert | currentColor |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter. |
| Geerbt | Nein |
| Animierbar | Ja, die Farbe des oberen Randes ist animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.borderTopColor = "black"; |
Syntax
border-top-color: color | transparent | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Ein Beispiel für border-top-color</h2>
<div>Beispiel für die Eigenschaft border-top-color mit unterschiedlicher Farbe oben.</div>
</body>
</html>Ein weiteres Beispiel, wo der Wert für den oberen Rand auf transparent eingestellt ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
h2 {
padding-bottom: 8px;
text-align: center;
border: 12px groove #1c87c9;
border-top-color: transparent;
}
</style>
</head>
<body>
<h2>Eine Überschrift mit einem transparenten oberen Rand.</h2>
</body>
</html>Ein CSS-Beispiel mit border-top-color, der Wert eine benannte Farbe ist:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: darkred;
}
</style>
</head>
<body>
<div>Ein Beispiel mit der Eigenschaft border-top-color mit einem benannten Farbwert.</div>
</body>
</html>Ein weiteres Beispiel mit einem hexadezimalen Wert für die Eigenschaft border-top-color:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<div>Ein Beispiel für border-top-color mit einem hexadezimalen Wert.</div>
</body>
</html>Ein weiteres Beispiel für border-top-color mit dem RGB-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Ein Beispiel für border-top-color mit einem RGB-Wert.</div>
</body>
</html>Ein anderes Beispiel für border-top-color mit einem HSL-Wert:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: hsl(24, 80%, 50%);
}
</style>
</head>
<body>
<div>Ein Beispiel für border-top-color mit einem HSL-Wert.</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| color | Es definiert die Farbe des oberen Randes. Die Standardfarbe ist die Farbe des aktuellen Elements. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. Erforderlicher Wert. |
| transparent | Wirkt eine transparente Farbe auf den oberen Rand auf. Der obere Rand nimmt weiterhin den durch den Wert für die Rahmenbreite definierten Platz ein. |
| initial | Es setzt die Eigenschaft auf seinen Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1+ | 1+ | 1+ | 3.5+ |
Übe dein Wissen
