border-top-width
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die border-top-width CSS Eigenschaft legt die Breite des oberen Randes eines Elements fest.
Probieren Sie es aus
border-top-width: thick;
border-top-width: 2em;
border-top-width: 4px;
border-top-width: 2ex;
border-top-width: 0;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntax
/* Keyword values */
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
/* <length> values */
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;
/* Global keywords */
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: revert-layer;
border-top-width: unset;
Werte
<line-width>-
Definiert die Breite des Randes, entweder als explizites nicht-negatives
<length>oder als Schlüsselwort. Wenn es ein Schlüsselwort ist, muss es einen der folgenden Werte haben:thinmediumthick
Hinweis:
Da die Spezifikation die genaue Dicke, die durch jedes Schlüsselwort angegeben wird, nicht festlegt, ist das genaue Ergebnis bei Verwendung eines dieser Schlüsselwörter implementierungsspezifisch. Trotzdem folgen sie immer dem Muster thin ≤ medium ≤ thick, und die Werte sind innerhalb eines Dokuments konstant.
Formale Definition
| Anfangswert | medium |
|---|---|
| Anwendbar auf | alle Elemente. Auch anwendbar auf ::first-letter. |
| Vererbt | Nein |
| Berechneter Wert | die absolute Länge; 0 falls border-top-style none oder hidden ist |
| Animationstyp | Längenangabe |
Formale Syntax
border-top-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Beispiele
HTML
<div>Element 1</div>
<div>Element 2</div>
CSS
div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-top-width: thick;
}
div:nth-child(2) {
border-top-width: 2em;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Browser-Kompatibilität
Loading…
Siehe auch
- Die anderen CSS-Eigenschaften, die sich auf die Randbreite beziehen:
border-left-width,border-right-width,border-bottom-width, undborder-width. - Die anderen CSS-Eigenschaften, die sich auf den oberen Rand beziehen:
border,border-top,border-top-style, undborder-top-color.