border
======

La propriété CSS **`border`** est une propriété raccourcie qui permet de définir les propriétés liées à la bordure. `border` peut être utilisée pour définir les valeurs de `border-width`, `border-style` et `border-color`.

Exemple interactif
------------------

Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que `border-image` ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est `none`). Ainsi, `border` peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.

**Note :** Bien que les propriétés raccourcies `border-width`, `border-style` et `border-color` acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (`border`) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.

### Différences entre les bordures et les contours (*outlines*)

Les bordures et contours sont similaires mais quelques différences les distinguent :

* Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément
* Selon la spécification, les contours ne sont pas nécessairement rectangulaires.
Syntaxe
-------


```css
/\* style \*/
border: solid;

/\* largeur | style \*/
border: 2px dotted;

/\* style | couleur \*/
border: outset #f33;

/\* largeur | style | couleur \*/
border: medium dashed green;

/\* Valeurs globales \*/
border: inherit;
border: initial;
border: unset;
```


La propriété `border` peut être définie grâce à une ou plusieurs valeurs `<line-width>`, `<line-style>` ou `<color>`.

**Note :** La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est `none`.

### Valeurs

`<line-width>`

Voir `border-width` (la valeur par défaut est `medium`).

`<line-style>`

Voir `border-style` (la valeur par défaut est `none`).

`<color>`

Voir `border-color`. Une valeur de type `<color>` qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété `color` de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).

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`
* `border-color`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-top-color`: `currentcolor`
    + `border-right-color`: `currentcolor`
    + `border-bottom-color`: `currentcolor`
    + `border-left-color`: `currentcolor`
 |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter`. |
| 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-color`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-bottom-color`: couleur calculée
    + `border-left-color`: couleur calculée
    + `border-right-color`: couleur calculée
    + `border-top-color`: couleur calculée
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `border-color`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-bottom-color`: une couleur
    + `border-left-color`: une couleur
    + `border-right-color`: une couleur
    + `border-top-color`: une couleur
* `border-style`: discrète
* `border-width`: pour chaque propriété individuelle de la propriété raccourcie :
    + `border-bottom-width`: une longueur
    + `border-left-width`: une longueur
    + `border-right-width`: une longueur
    + `border-top-width`: une longueur
 |

Syntaxe formelle
----------------
```

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

### CSS


```css
.brd {
  border: 1px solid black;
}
style {
  border: 1px dashed black;
  display: block;
}
```

### HTML


```html
<div class="brd">Oh des bordures</div>
<p>N'hésitez pas à éditer le CSS qui suit pour voir l'effet des valeurs.</p>
<style contenteditable>
 .brd {
 border: 1px solid black;
 }
</style>
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # propdef-border |

Compatibilité des navigateurs
-----------------------------

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

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

* `border-top-left-radius`,
* `border-top-right-radius`,
* `border-bottom-right-radius`,
* `border-bottom-left-radius`