border-inline-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 ⁨avril 2021⁩.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété border-inline-width définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à border-top-width et border-bottom-width ou à border-left-width et border-right-width selon les valeurs des propriétés writing-mode, direction et text-orientation.

css

/* Valeurs de type <'border-width'> */
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;

The border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width.

Syntaxe

Valeur

<'border-width'>: La largeur de la bordure. Voir border-width.

Définition formelle

Valeur initiale	`medium`
Applicabilité	tous les éléments
Héritée	non
Pourcentages	largeur logique du bloc englobant
Valeur calculée	une longueur absolue ; `0` si le style de la bordure vaut `none` ou `hidden`
Type d'animation	by computed value type

Syntaxe formelle

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

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

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

Exemples

CSS

css

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.texteExemple {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-width: 5px 10px;
}

HTML

html

<div>
  <p class="texteExemple">Texte d'exemple</p>
</div>

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1 # propdef-border-inline-width

Compatibilité des navigateurs

Voir aussi

Les propriétés physiques qui peuvent correspondre à cette propriété logique border-top-width, border-right-width, border-bottom-width, and border-left-width
writing-mode, direction, text-orientation

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨3 août 2023⁩ par les contributeurs du MDN.

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