Type CSS <line-width> - CSS

Syntaxe

Valeurs

Le type <line-width> est défini en utilisant soit <length> ou un mot-clé :

<length>: Une longueur (<length>) positive.
hairline: Représente une ligne « juste visible » qui est inférieure ou égale à 1px.
thin: Équivaut à 1px.
medium: Équivaut à 3px.
thick: Équivaut à 5px.

Syntaxe formelle

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

Exemples

Définir une largeur de ligne

Cet exemple montre toutes les valeurs clés <line-width>, ainsi qu'une valeur <length>.

HTML

Nous incluons cinq boîtes à l'intérieur d'un élément HTML <section>.

html

<section>
  <div data-width="hairline">hairline</div>
  <div data-width="thin">thin</div>
  <div data-width="medium">medium</div>
  <div data-width="thick">thick</div>
  <div data-width="10px">10px</div>
</section>

CSS

Nous mettons en forme tous les éléments pour qu'ils soient identiques, puis nous définissons la border-width en fonction de l'attribut data-width de l'élément.

css

section {
  display: flex;
  gap: 10px;
}
div {
  flex: 0 0 15%;
  border-style: solid;
  border-color: purple;
  text-align: center;
}
[data-width="hairline"] {
  border-width: hairline;
}

[data-width="thin"] {
  border-width: thin;
}

[data-width="medium"] {
  border-width: medium;
}

[data-width="thick"] {
  border-width: thick;
}

[data-width="10px"] {
  border-width: 10px;
}

@supports not (border-width: hairline) {
  body::before {
    content: "Votre navigateur ne prend pas en charge la valeur 'hairline'.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

Le type de donnée <line-style>
Le module des bordures et arrière-plans CSS
Le module d'interface utilisateur de base CSS
Le module d'espacement CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 18 août 2026 par les contributeur·ice·s du MDN.

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