border-block-end-color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janvier 2020.
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-end-color définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés border-top-color, border-right-color, border-bottom-color ou border-left-color selon les valeurs des propriétés writing-mode, direction et text-orientation.
Exemple interactif
border-block-end-color: red;
writing-mode: horizontal-tb;
border-block-end-color: #32a1ce;
writing-mode: vertical-rl;
border-block-end-color: rgb(170, 50, 220, 0.6);
writing-mode: horizontal-tb;
border-block-end-color: hsl(60, 90%, 50%, 0.8);
writing-mode: vertical-lr;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with a border around it.
</div>
</section>
#example-element {
background-color: #eee;
color: #000;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
unicode-bidi: bidi-override;
}
Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :
Syntaxe
border-block-end-color: red;
border-block-end-color: #fffff;
border-block-end-color: rgb(200, 0, 0);
border-block-end-color: unset;
border-block-end-color: initial;
border-block-end-color: inherit;
Valeurs
<'border-color'>-
La couleur utilisée pour la bordure, voir
border-color.
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-end-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;
}
.exemple {
writing-mode: vertical-lr;
border: 10px solid blue;
border-block-end-color: red;
}
HTML
<div>
<p class="exemple">Texte d'exemple</p>
</div>
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # border-color |
Compatibilité des navigateurs
Loading…
Voir aussi
-
Les propriétés physiques correspondantes :