Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété border-inline-style permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à border-top-style et border-bottom-style ou à border-left-style et border-right-style selon les valeurs des propriétés writing-mode, direction et text-orientation.
/* Valeurs de type <'border-style'> */ border-inline-style: dashed; border-inline-style: dotted; border-inline-style: groove;
Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété border-block-style qui définit border-block-start-style et border-block-end-style.
Syntaxe
Valeur
<'border-style'>- Le style de la ligne pour la bordure. Voir
border-style.
Syntaxe formelle
<'border-top-style'>
Exemples
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.texteExemple {
writing-mode: vertical-lr;
border: 5px solid blue;
border-inline-style: dashed;
}
HTML
<div> <p class="texteExemple">Texte exemple</p> </div>
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Logical Properties and Values Level 1 La définition de 'border-inline-style' dans cette spécification. |
Brouillon de l'éditeur | Définition initiale. |
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Compatibilité des navigateurs
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-inline-style | Chrome Support complet 69 | Edge Support complet 79 | Firefox Support complet 66 | IE Aucun support Non | Opera Support complet 56 | Safari Aucun support Non | WebView Android Support complet 69 | Chrome Android Support complet 69 | Firefox Android Support complet 66 | Opera Android Support complet 48 | Safari iOS Aucun support Non | Samsung Internet Android Support complet 10.0 |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
Voir aussi
- Les propriétés physiques qui correspondent à cette propriété logique :
writing-mode,direction,text-orientation