CSS border-top-color-Eigenschaft
Die Eigenschaft border-top-color definiert die Farbe der oberen Randlinie eines Elements.
Sie können die Farbe der oberen Randlinie sowie die Farben der unteren, rechten und linken Randlinien mit der Kurzschreibweiseigenschaft border-color festlegen.
Wenn Sie die Eigenschaft border-top-color verwenden, sollten Sie zuerst die Eigenschaften border-style oder border-top-style festlegen und anschließend die Farbe des definierten Stils ändern.
Die Standardbreite eines Rahmens ist medium. Sie können die Breite entweder mit den Eigenschaften border-width oder border-top-width festlegen.
| Anfangswert | currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbbar | Nein |
| Animierbar | Ja. Die Farbe der oberen Randlinie ist animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderTopColor = "black"; |
Syntax
Syntax der CSS border-top-color-Eigenschaft
border-top-color: color | transparent | initial | inherit;Beispiel für die border-top-color-Eigenschaft:
Beispiel für die CSS border-top-color-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-top-color example</h2>
<div>Example for the border-top-color property with different top border color.</div>
</body>
</html>Ergebnis
Beispiel für die border-top-color-Eigenschaft mit dem Wert „transparent“:
Beispiel für die CSS border-top-color-Eigenschaft mit transparentem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding-bottom: 8px;
text-align: center;
border: 12px groove #1c87c9;
border-top-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent top border</h2>
</body>
</html>INFO
Hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen können als Wert für die border-top-color-Eigenschaft verwendet werden.
Beispiel für die border-top-color-Eigenschaft mit einem benannten Farbwert:
Beispiel für die CSS border-top-color-Eigenschaft mit dem Wert darkred (benannte Farbe)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: darkred;
}
</style>
</head>
<body>
<div>Border-top-color property with a named color value.</div>
</body>
</html>Beispiel für die border-top-color-Eigenschaft mit einem hexadezimalen Wert:
Beispiel für die CSS border-top-color-Eigenschaft mit hexadezimalem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-top-color property with a hexadecimal value.</div>
</body>
</html>Beispiel für die border-top-color-Eigenschaft mit einem RGB-Wert:
Beispiel für die CSS border-top-color-Eigenschaft mit RGB-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-top-color property with a RGB value.</div>
</body>
</html>Beispiel für die border-top-color-Eigenschaft mit einem HSL-Wert:
Beispiel für die CSS border-top-color-Eigenschaft mit HSL-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 10px;
width: 50%;
border: solid #666;
border-top-color: hsl(24, 80%, 50%);
}
</style>
</head>
<body>
<div>Border-top-color property with a HSL value.</div>
</body>
</html>Werte
| Wert | Beschreibung | Ausführen |
|---|---|---|
| color | Definiert die Farbe der oberen Randlinie. Standardfarbe ist die Farbe des aktuellen Elements. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. Erforderlicher Wert. | Ausführen » |
| transparent | Wendet eine transparente Farbe auf die obere Randlinie an. Die obere Randlinie nimmt weiterhin den durch den border-width-Wert definierten Raum ein. | Ausführen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausführen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Wofür wird die CSS-Eigenschaft 'border-top-color' verwendet?