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.

Exemple interactif

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

css
/* 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-inline-style = 
<'border-top-style'>{1,2}

Exemples

HTML

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

CSS

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
# 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