border-block-style
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-style définit le style des bordures logiques de bloc d'un élément, qui correspond à un style de bordure physique selon le mode d'écriture, la direction et l'orientation du texte de l'élément. Elle peut correspondre aux propriétés border-top-style et border-bottom-style, ou border-left-style et border-right-style selon les valeurs définies pour writing-mode, direction et text-orientation.
Le style de bordure dans l'autre dimension peut être défini avec border-inline-style, qui définit border-inline-start-style et border-inline-end-style.
Exemple interactif
border-block-style: dotted;
writing-mode: horizontal-tb;
border-block-style: dotted;
writing-mode: vertical-rl;
border-block-style: groove;
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
/* Valeurs de type <'border-style'> */
border-block-style: dashed;
border-block-style: dotted;
border-block-style: groove;
/* Valeurs globales */
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: revert-layer;
border-block-style: unset;
Valeur
<'border-style'>-
Le style de la ligne pour la bordure. Voir
border-style.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
border-block-style =
<'border-top-style'>{1,2}
<border-top-style> =
<line-style>
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Exemples
Bordure en pointillés avec du texte vertical
HTML
<div>
<p class="exempleTexte">Texte exemple</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exempleTexte {
writing-mode: vertical-lr;
border: 5px solid blue;
border-block-style: dashed;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-border-block-style |
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-style,border-right-style,border-bottom-styleouborder-left-style. - Les propriétés
writing-mode,direction,text-orientation