border-color
============

La propriété CSS **`border-color`** est une propriété raccourcie qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.

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

Chaque côté peut être paramétré individuellement grâce aux propriétés `border-top-color`, `border-right-color`, `border-bottom-color` et `border-left-color` ou, si on utilise les propriétés logiques : `border-block-start-color`, `border-block-end-color`, `border-inline-start-color` et `border-inline-end-color`.

Syntaxe
-------


```css
/\* border-color : Une valeur \*/
/\* Une valeur pour les quatre côtés \*/
border-color: red;

/\* border-color : Deux valeurs \*/
/\* Première valeur : côtés horizontaux \*/
/\* Seconde valeur : côtés verticaux \*/
border-color: red #f015ca;

/\* border-color : Trois valeurs \*/
/\* Première valeur : côté haut \*/
/\* Deuxième valeur : côtés verticaux \*/
/\* Troisième valeur : côté bas \*/
border-color: red yellow green;

/\* border-color : Quatre valeurs \*/
/\* Première valeur : côté haut \*/
/\* Deuxième valeur : côté droit \*/
/\* Troisième valeur : côté bas \*/
/\* Quatrième valeur : côté gauche \*/
border-color: red yellow green blue;

/\* Valeurs globales \*/
border-color: inherit;
```

### Valeurs

`<color>`

Une valeur de type `<color>` qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.

`inherit`

Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | 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-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-bottom-color`: une couleur
* `border-left-color`: une couleur
* `border-right-color`: une couleur
* `border-top-color`: une couleur
 |

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

border-color =   
  [ <color> | <image-1D> ]{1,4}    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
#unevaleur {
  border-color: red;
}

#horzvert {
  border-color: gold red;
}

#hauthoribas {
  border-color: red cyan gold;
}

#hdbg {
  border-color: red cyan black gold;
}

/\* Set width and style for all divs \*/
div {
  border: solid 0.3em;
  width: auto;
  margin: 0.5em;
  padding: 0.5em;
}

ul {
  margin: 0;
  list-style: none;
}
```

### HTML


```html
<div id="unevaleur">
  <p><code>border-color: red;</code> équivalent à</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: red;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="horzvert">
  <p><code>border-color: gold red;</code> équivalent à</p>
  <ul>
    <li><code>border-top-color: gold;</code></li>
    <li><code>border-right-color: red;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: red;</code></li>
  </ul>
</div>
<div id="hauthoribas">
  <p><code>border-color: red cyan gold;</code> équivalent à</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: gold;</code></li>
    <li><code>border-left-color: cyan;</code></li>
  </ul>
</div>
<div id="hdbg">
  <p><code>border-color: red cyan black gold;</code> équivalent à</p>
  <ul>
    <li><code>border-top-color: red;</code></li>
    <li><code>border-right-color: cyan;</code></li>
    <li><code>border-bottom-color: black;</code></li>
    <li><code>border-left-color: gold;</code></li>
  </ul>
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # logical-shorthand-keyword |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

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

* Les propriétés liées à la couleur de la bordure
    + `border`,
    + `border-top-color`,
    + `border-right-color`,
    + `border-bottom-color`,
    + `border-left-color`,
* Les autres propriétés raccourcies liées à la bordure :
    + `border-width`,
    + `border-style`.
* Appliquer des couleurs sur des éléments HTML grâce à CSS
* Le type de données `<color>`
* Les autres propriétés relatives aux couleurs : `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color` et `column-rule-color`.