border-block
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 est une propriété raccourcie qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en bloc.
border-block: 1px;
border-block: 2px dotted;
border-block: medium dashed blue;
border-block peut être utilisée afin de définir une ou plusieurs propriétés parmi border-block-width, border-block-style et border-block-color. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à border-top et border-bottom ou à border-right et border-left selon les valeurs des propriétés writing-mode, direction et text-orientation.
Les bordures sur l'autre dimension peuvent être définies grâce à border-inline, (qui est la proprété raccourcie pour border-inline-start et border-inline-end).
Syntaxe
Valeurs
La propriété border-block peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.
<'border-width'>-
La largeur de la bordure. Voir
border-width. <'border-style'>-
Le style pour la ligne de la bordure. Voir
border-style. <'color'>-
La couleur de la bordure. Voir
color.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
border-block =
<'border-block-start'>
<border-block-start> =
<line-width> ||
<line-style> ||
<color>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
<line-style> =
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outset
Exemples
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exempleTexte {
writing-mode: vertical-rl;
border-block: 5px dashed blue;
}
HTML
<div>
<p class="exempleTexte">Texte exemple</p>
</div>
Résultat
Spécifications
| Specification |
|---|
| CSS Logical Properties and Values Level 1 # propdef-border-block |
Compatibilité des navigateurs
Chargement…
Voir aussi
-
Les propriétés physiques qui peuvent correspondre à cette propriété logique :
-
Les propriétés relatives aux propriétés logiques :
writing-mode,direction,text-orientation