border-top-width

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

css

/* 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 initialemedium
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Valeur calculéela longueur absolue ou 0 si border-top-style vaut none ou hidden
Type d'animationune longueur

Syntaxe formelle

border-top-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

Exemples

CSS

css

.element1{
  border-top: thick solid red;
}
.element2{
  border-top: medium solid orange;
}
.element3{
  border-top: thin solid green;
}

HTML

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