border-top
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die border-top
Kurzschrift CSS Eigenschaft setzt alle Eigenschaften des oberen Randes eines Elements.
Probieren Sie es aus
Wie bei allen Kurzschrift-Eigenschaften setzt border-top
immer die Werte aller Eigenschaften, die es setzen kann, auch wenn sie nicht spezifiziert sind. Die nicht spezifizierten werden auf ihre Standardwerte gesetzt. Betrachten Sie den folgenden Code:
border-top-style: dotted;
border-top: thick green;
Er ist tatsächlich derselbe wie dieser hier:
border-top-style: dotted;
border-top: none thick green;
Der vor border-top
angegebene Wert von border-top-style
wird ignoriert. Da der Standardwert von border-top-style
none
ist, führt das Nicht-Spezifizieren des border-style
-Teils zu keinem Rand.
Zuordnende Eigenschaften
Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:
Syntax
border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;
/* Global values */
border-top: inherit;
border-top: initial;
border-top: revert;
border-top: revert-layer;
border-top: unset;
Die drei Werte der Kurzschrifteigenschaft können in beliebiger Reihenfolge angegeben werden, wobei einer oder zwei davon weggelassen werden können.
Werte
<br-width>
-
Siehe
border-top-width
. <br-style>
-
Siehe
border-top-style
. <color>
-
Siehe
border-top-color
.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter . |
Vererbt | Nein |
Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
Animationstyp | wie die jeweiligen Kurzschreibweisen: |
Formale Syntax
Beispiele
Anwendung eines oberen Randes
HTML
<div>This box has a border on the top side.</div>
CSS
div {
border-top: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
Ergebnisse
Spezifikationen
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # border-shorthands |
Browser-Kompatibilität
BCD tables only load in the browser