border-inline-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

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

border-inline-style: dotted; writing-mode: horizontal-tb;

border-inline-style: dotted; writing-mode: vertical-rl;

border-inline-style: groove; writing-mode: horizontal-tb; direction: rtl;

<section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section>

#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override; }

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} 

<border-top-style> = 
 <line-style> 

<line-style> = 
 none |
 hidden |
 dotted |
 dashed |
 solid |
 double |
 groove |
 ridge |
 inset |
 outset

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

Voir aussi

Les propriétés physiques qui correspondent à cette propriété logique : border-top-style, border-right-style, border-bottom-style, border-left-style.
writing-mode, direction, text-orientation