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.
La propriété CSS border-inline-width définit la largeur des bordures logiques en ligne d'un élément, qui correspond à une largeur de bordure physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle correspond aux propriétés border-top-width et border-bottom-width, ou border-left-width et border-right-width, selon les valeurs définies pour writing-mode, direction et text-orientation.
La largeur de bordure dans l'autre dimension peut être définie avec border-block-width, qui définit border-block-start-width et border-block-end-width.
Exemple interactif
border-inline-width: thick;
writing-mode: horizontal-tb;
border-inline-width: thick;
writing-mode: vertical-rl;
border-inline-width: 4px;
writing-mode: horizontal-tb;
direction: rtl;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Ceci est une boîte avec une bordure autour.
</div>
</section>
#example-element {
background-color: palegreen;
color: black;
border: 0 solid crimson;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Syntaxe
/* Valeurs de type <'border-width'> */
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;
/* Valeurs globales */
border-inline-width: inherit;
border-inline-width: initial;
border-inline-width: revert;
border-inline-width: revert-layer;
border-inline-width: unset;
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
HTML
<div>
<p class="exempleTexte">Texte d'exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exempleTexte {
writing-mode: vertical-lr;
border: 1px solid blue;
border-inline-width: 5px 10px;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-inline-width |
Compatibilité des navigateurs
Voir aussi
- Propriétés et valeurs logiques CSS
- Cette propriété correspond à l'une des propriétés physiques de bordure :
border-top-width,border-right-width,border-bottom-widthouborder-left-width - Les propriétés
writing-mode,direction,text-orientation