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.
La propriété CSS border-block-color permet de définir la couleur des bordures logiques de bloc d'un élément. Cette couleur correspond à une bordure physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle peut donc correspondre à border-top-color et border-bottom-color, ou à border-right-color et border-left-color selon les valeurs définies pour writing-mode, direction et text-orientation.
La couleur de la bordure sur l'autre dimension peut être définie avec border-inline-color, qui définit border-inline-start-color et border-inline-end-color.
Exemple interactif
border-block-color: red;
writing-mode: horizontal-tb;
border-block-color: #32a1ce;
writing-mode: vertical-rl;
border-block-color: rgb(170 50 220 / 0.6);
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: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Syntaxe
border-block-color: yellow;
border-block-color: #f5f6f7;
/* Valeurs globales */
border-block-color: inherit;
border-block-color: initial;
border-block-color: revert;
border-block-color: revert-layer;
border-block-color: unset;
Valeurs
<color>-
La couleur de la bordure.
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
Bordure avec du texte vertical
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: 10px solid blue;
border-block-color: red;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block-color |
Compatibilité des navigateurs
Voir aussi
- Propriétés et valeurs logiques CSS
- Cette propriété correspond aux propriétés physiques de bordure :
border-top-color,border-right-color,border-bottom-colorouborder-left-color. - Les propriétés
writing-mode,direction,text-orientation