1. Web
  2. CSS
  3. border-width

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

border-width

Baseline Widely available

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-width est une propriété raccourcie qui définit la largeur de la bordure d'un élément.

Cette propriété raccourcie définit les propriétés détaillées

Si on utilise les propriétés logiques, elle définit border-block-start-width, border-block-end-width, border-inline-start-width et border-inline-end-width.

Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie border.

Exemple interactif

border-width: thick;

border-width: 1em;

border-width: 4px 1.25em;

border-width: 2ex 1.25ex 0.5ex;

border-width: 0 4px 8px 12px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

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

Syntaxe

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

/* Une largeur pour chaque côté */
/* Valeur de type <length> */
border-width: 5px;

/* côtés haut et bas | côtés gauche et droit */
border-width: 2px 1.5em;

/* côté haut | côtés gauche et droit | côté bas */
border-width: 1px 2em 1.5cm;

/* haut | droite | bas | gauche */
border-width: 1px 2em 0 4rem;

/* Valeurs globales */
border-width: inherit;
border-width: initial;
border-width: unset;

La propriété border-width peut être définie avec une, deux, trois ou quatre valeurs.

  • Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés
  • Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite
  • Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse
  • Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).

Valeurs

<line-width>

Une valeur de longueur (type <length> ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :

  • thin (fin)
  • medium (intermédiaire)
  • thick (épais)

La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : thin ≤ medium ≤ thick et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

border-width = 
  <'border-top-width'>{1,4}  

<border-top-width> = 
  <line-width>  

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

Exemples

HTML

html
<p id="unevaleur">Une valeur : la bordure fait 6px sur les 4 côtés.</p>

<p id="deuxvaleurs">
  Deux valeurs différentes : elle fait 2px en haut et en bas et elle mesure 10px
  pour les bords droit et gauche.
</p>

<p id="troisvaleurs">
  Trois valeurs différentes : 0.3em pour le haut, 9px pour le bas et zéro pour
  la droite et la gauche.
</p>

<p id="quatrevaleurs">
  Quatre valeurs différentes : "thin" pour le haut, "medium" pour la droite,
  "thick" pour le bas et 1em pour la gauche.
</p>

CSS

css
#unevaleur {
  border: ridge #ccc;
  border-width: 6px;
}

#deuxvaleurs {
  border: solid red;
  border-width: 2px 10px;
}

#troisvaleurs {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}

#quatrevaleurs {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}

p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

Résultat

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3
# border-width

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content