border-inline-style

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.

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

/* Valeurs de type <'border-style'> */
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: revert;
border-inline-style: groove;

Valeur

<'border-style'>

Le style de la ligne pour la bordure. Voir border-style.

Syntaxe formelle

<'border-top-style'>

Exemples

HTML

<div>
  <p class="texteExemple">Texte exemple</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.texteExemple {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-style: dashed;
}

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1 (CSS Logical Properties 1)
# propdef-border-inline-style
Valeur initialenone
Applicabilitétous les éléments
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi