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 July 2015.
La propriété border-top-width
définit l'épaisseur de la bordure pour le côté haut d'une boîte.
Exemple interactif
Syntaxe
/* Une valeur de longueur */
/* Type <length> */
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;
/* Valeurs avec un mot-clé */
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;
/* Valeurs globales */
border-top-width: inherit;
border-top-width: initial;
border-top-width: unset;
Valeurs
<line-width>
-
Une valeur de longueur (
<length>
) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :thin
(fin)medium
(intermédiaire)thick
(épais)
La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée
thin ≤ medium ≤ thick
et que ces valeurs soient constantes pour un même document.
Définition formelle
Valeur initiale | medium |
---|---|
Applicabilité | tous les éléments. S'applique aussi à ::first-letter . |
Héritée | non |
Valeur calculée | la longueur absolue ou 0 si border-top-style vaut none ou hidden |
Type d'animation | une longueur |
Syntaxe formelle
border-top-width =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
Exemples
CSS
.element1 {
border-top: thick solid red;
}
.element2 {
border-top: medium solid orange;
}
.element3 {
border-top: thin solid green;
}
HTML
<p class="element1">Une bordure épaisse rouge.</p>
<p class="element2">Une bordure moyenne orange.</p>
<p class="element3">Et une bordure fine verte.</p>
Résultat
Spécifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-border-width |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
Les autres propriétés liées à la largeur de la bordure :
-
Les autres propriétés CSS liées à la bordure du côté haut :