border-block-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-block-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 de bloc. 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-block-width: 5px 10px; border-block-width: 5px; border-block-width: thick; The border width in the other dimension can be set with border-inline-width, which sets border-block-inline-width, and border-block-inline-width.
| 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
Valeur
<'border-width'>-
La largeur de la bordure. Voir
border-width.
Syntaxe formelle
border-block-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-block-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-block-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