CSS border-top-Eigenschaft
Die CSS border-top-Eigenschaft legt die Breite, Farbe und den Linienstil des oberen Rands von Elementen fest. Sie ist eine Kurzschreibweise (Shorthand), um die Werte von border-top-width, border-top-style und border-top-color anzugeben.
Diese drei Werte der Kurzschreibweise können in beliebiger Reihenfolge angegeben werden, wobei einer oder zwei von ihnen weggelassen werden können.
Wenn keine Farbe angegeben ist, wird der Wert aus der color-Eigenschaft übernommen. Ist die color-Eigenschaft nicht definiert, wird standardmäßig Schwarz verwendet.
Wenn die width nicht angegeben ist, wird die mittlere Größe des Elements verwendet.
| Anfangswert | medium none currentColor |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter. |
| Vererbt | Nein |
| Animierbar | Ja. Die Farbe und Breite des Rands sind animierbar. |
| Version | CSS1 |
| DOM-Syntax | object.style.borderTop = "1px solid black"; |
Syntax
Syntax der CSS border-top-Eigenschaft
border-top: border-width border-style border-color | initial | inherit;Beispiel zur border-top-Eigenschaft:
Beispiel zur CSS border-top-Eigenschaft mit solid-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-top: 3px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-top example</h2>
<div> This is a simple example for the border-top property.</div>
</body>
</html>Ergebnis
Beispiel zur border-top-Eigenschaft, angewendet auf verschiedene Elemente:
Beispiel zur CSS border-top-Eigenschaft mit dotted-, solid- und double-Werten
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-top: 5px solid #8ebf42;
}
p {
border-top: 4px dotted #1c87c9;
}
div {
border-top: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green top border</h1>
<p>A heading with a dotted blue top border.</p>
<div>A div element with a thick double top border.</div>
</body>
</html>Sie können eine Box mit dem <div>-Element erstellen, eine background-color für Ihre Box festlegen und den oberen Rand definieren.
Beispiel zur Verwendung der border-top-Eigenschaft zum Erstellen einer Box mit ridge-Rand:
Beispiel zur CSS border-top-Eigenschaft mit ridge-Wert
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-top: 20px ridge #8ebf42;
background-color: #ccc;
height: 100px;
width: 200px;
font-weight: bold;
text-align: center;
padding: 3px;
}
</style>
</head>
<body>
<div>
<p>This box has a ridge border on the top.</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| border-top-width | Legt die Breite des oberen Rands eines Elements fest. Der Standardwert ist „medium“. Erforderlicher Wert. |
| border-top-style | Legt den Linienstil des oberen Rands eines Elements fest. Der Standardwert ist „none“. Erforderlicher Wert. |
| border-top-color | Legt die Farbe des oberen Rands eines Elements fest. Der Standardwert ist die aktuelle Textfarbe. |
| initial | Legt die Eigenschaft auf ihren Standardwert fest. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Wie lautet die korrekte Syntax, um eine CSS-Eigenschaft 'border-top' festzulegen?