border-inline-start
===================

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

Propriétés détaillées correspondantes
-------------------------------------

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

* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
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 initiale | pour chaque propriété individuelle de la propriété raccourcie :* `border-width`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-top-width`: `medium`
    + `border-right-width`: `medium`
    + `border-bottom-width`: `medium`
    + `border-left-width`: `medium`
* `border-style`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-top-style`: `none`
    + `border-right-style`: `none`
    + `border-bottom-style`: `none`
    + `border-left-style`: `none`
* `color`: `canvastext`
 |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `border-width`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-bottom-width`: la longueur absolue ou `0` si `border-bottom-style` vaut `none` ou `hidden`
    + `border-left-width`: la longueur absolue ou `0` si `border-left-style` vaut `none` ou `hidden`
    + `border-right-width`: la longueur absolue ou `0` si `border-right-style` vaut `none` ou `hidden`
    + `border-top-width`: la longueur absolue ou `0` si `border-top-style` vaut `none` ou `hidden`
* `border-style`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-bottom-style`: comme spécifié
    + `border-left-style`: comme spécifié
    + `border-right-style`: comme spécifié
    + `border-top-style`: comme spécifié
* `border-inline-start-color`: couleur calculée
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `border-inline-start-color`: by computed value type
* `border-inline-start-style`: discrète
* `border-inline-start-width`: by computed value type
 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les propriétés physiques correspondantes : `border-top`, `border-right`, `border-bottom`, `border-left`
* `writing-mode`, `direction`, `text-orientation`