MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

La propriété border-top permet de paramétrer la bordure haute d'un élément. C'est une propriété raccourcie qui permet de définir les valeurs de :

border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

Note : Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.

Comme pour les autres propriétés raccourcies, border-top définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :

border-top-style: dotted;
border-top: thick green;

est équivalent à :

border-top-style: dotted;
border-top: none thick green;

 et la valeur border-top-style fournie avant border-top est ignorée.

La valeur par défaut de border-top-style étant none, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.

Valeurs

<br-width> 
Voir border-top-width.
<br-style> 
Voir border-top-style.
<color> 
Voir border-top-color.

Syntaxe formelle

<br-width> || <br-style> || <color>


<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

.exemple {
  border-top: 3px dotted orange;
} 

HTML

<p class="exemple">
  En passant elle prit sur un rayon un pot
  de confiture portant cette étiquette,
  « MARMELADE D’ORANGES. »
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-top' dans cette spécification.
Candidat au statut de recommandation Pas de modification directe bien que la modification de valeurs pour border-top-color s'applique.
CSS Level 2 (Revision 1)
La définition de 'border-top' dans cette spécification.
Recommendation Aucune modification significative.
CSS Level 1
La définition de 'border-top' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 4 3.5 1.0 (85)
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1.0) (Oui) (Oui) (Oui) (Oui)

Étiquettes et contributeurs liés au document

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