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.
/* 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
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-lr;
border: 1px solid blue;
border-inline-width: 5px 10px;
}
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
Chargement…
Voir aussi
- Les propriétés physiques qui peuvent correspondre à cette propriété logique
border-top-width,border-right-width,border-bottom-width, andborder-left-width writing-mode,direction,text-orientation