Type CSS `<line-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.

Voir la compatibilité complète
En savoir plus

Le type de données énuméré CSS <line-width> représente la longueur ou la valeur clé qui définit la largeur d'une ligne, ou l'absence de ligne. Les valeurs clés <line-width> sont utilisées dans les propriétés abrégées et longues suivantes :

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