border-inline-start

Baseline Widely available

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

La propriété border-inline-start est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture.

Exemple interactif

border-inline-start: solid; writing-mode: horizontal-tb; 
border-inline-start: dashed red; writing-mode: vertical-rl; 
border-inline-start: 1rem solid; 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: #8b008b; padding: 0.75em; width: 80%; height: 100px; unicode-bidi: bidi-override; }

Propriétés détaillées correspondantes

Cette propriété est une propriété raccourcie pour les propriétés CSS :

Syntaxe

css
border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; /* Valeurs globales */ border-inline-start: inherit; border-inline-start: initial; border-inline-start: revert; border-inline-start: unset;

Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés border-top, border-right, border-bottom ou border-left selon les valeurs utilisées pour writing-mode, direction et text-orientation.

On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : border-block-start, border-block-end, border-inline-end.

Valeurs

Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :

<'border-width'>

La largeur de la bordure, voir border-width.

<'border-style'>

Le style utilisé pour la ligne de la bordure sur ce côté, voir border-style.

<'color'>

La couleur utilisée pour la bordure sur ce côté, voir color.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

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

HTML

html
<div> <p class="exemple">Texte d'exemple</p> </div>

CSS

css
div { background-color: yellow; width: 120px; height: 120px; } .exemple { writing-mode: vertical-rl; border-inline-start: 5px dashed blue; }

Résultat

Spécifications

Specification
CSS Logical Properties and Values Level 1
# border-shorthands

Compatibilité des navigateurs

Voir aussi