border-top-width

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété CSS border-top-width permet de définir l'épaisseur de la bordure supérieure d'un élément.

Exemple interactif

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">
    Ceci est une boîte avec une bordure autour.
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
border-top-width: thin;
border-top-width: medium;
border-top-width: thick;

/* Valeur de type <length> */
border-top-width: 10em;
border-top-width: 3vmax;
border-top-width: 6px;

/* Valeurs globales */
border-top-width: inherit;
border-top-width: initial;
border-top-width: revert;
border-top-width: revert-layer;
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)
- Identique à 1px.
medium (intermédiaire)
- Identique à 3px.
thick (épais)
- Identique à 5px.

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,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick

Exemples

HTML

html

<div>Élément 1</div>
<div>Élément 2</div>

CSS

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;
}

Résultat

Spécifications

Spécification
CSS Backgrounds and Borders Module Level 3 # border-width

Compatibilité des navigateurs

Voir aussi

Les autres propriétés liées à la largeur de la bordure : border-left-width, border-right-width, border-bottom-width et border-width.
Les autres propriétés CSS liées à la bordure du côté haut : border, border-top, border-top-style et border-top-color.

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 17 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu