La propriété border-top-width définit l'épaisseur de la bordure pour le côté haut d'une boîte.

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
 
Une bordure fine.
medium
 
Une bordure moyenne.
thick
 
Une bordure épaisse.
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.

Syntaxe formelle

<line-width>


<line-width> = <length> | 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

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-top-width' dans cette spécification.
Candidat au statut de recommandation Pas de modification significative.
CSS Level 2 (Revision 1)
La définition de 'border-top-width' dans cette spécification.
Recommendation Définition initiale.

Valeur initialemedium
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéela longueur absolue ou 0 si border-top-style vaut none ou hidden
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 2.3Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 1Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, teoli, FredB, Yuichiro, Mgjbot, Fredchat
Dernière mise à jour par : SphinxKnight,