border-block-color
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-color définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à border-top-color et border-bottom-color ou à border-right-color et border-left-color selon les valeurs des propriétés writing-mode, direction et text-orientation.
border-block-color: yellow;
border-block-color: #f5f6f7;
Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique border-inline-color qui définit border-inline-start-color et border-inline-end-color.
Syntaxe
Valeurs
Définition formelle
| Valeur initiale | currentcolor |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | by computed value type |
Syntaxe formelle
border-block-color =
<'border-top-color'>{1,2}
<border-top-color> =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Exemples
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-lr;
border: 10px solid blue;
border-block-color: red;
}
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-color |
Compatibilité des navigateurs
Chargement…
Voir aussi
-
Les propriétés physiques qui peuvent correspondre à cette propriété :
-
Les propriétés relatives aux propriétés logiques :
writing-mode,direction,text-orientation