border-color

  • Raccourci de la révision : CSS/border-color
  • Titre de la révision : border-color
  • ID de la révision : 89882
  • Créé :
  • Créateur : Yuichiro
  • Version actuelle ? Non
  • Commentaire 24 words added

Contenu de la révision

 

{{ CSSRef() }}

Résumé

La propriété border-color est un raccourci pour définir la couleur des quatre côtés de la bordure d'un élément.

  • Valeur initiale : la propriété {{ Cssxref("color") }} de l'élément
  • S'applique à : tous les éléments
  • Héritée : non
  • Pourcentages : N/A
  • Média : Visuel
  • Valeur calculée : La valeur calculée de color par défaut, ou celle spécifiée.

Syntaxe

border-color: [ <color> || transparent ]{1,4} | inherit

Valeurs

<color> 
La couleur peut être définie sous forme de valeur hexadécimale RGB, une valeur classique RGB, ou en utilisant les mots clefs de couleurs prédéfinis.
transparent 
La bordure n'est pas affichée, mais elle occupe l'espace qui lui est dévolu sur la page.

Vous pouvez passer jusqu'à 4 valeurs :

  • Si une seule valeur est définie, elle s'applique aux quatre cotés.
  • Si deux valeurs sont définies, la première valeur s'applique aux côtés haut et bas de la bordure et la seconde aux côtés gauche et droit.
  • Si trois valeurs sont définies, la premièrere s'applique au côté haut de la bordure, la deuxième aux côtés gauche et droit et la troisième au côté bas.
  • Si quatre valeurs sont définies, la première s'applique au côté haut de la bordure, la deuxième au côté droit, la troisième au côté bas et la quatrième au côté gauche.

Exemples

{{ CSSRefExampleLink("border") }}

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notes

Pour voir la bordure, vous devez également définir {{ Cssxref("border-width") }} avec une valeur positive et {{ Cssxref("border-style") }} doit être un style visible (différent de none ou hidden).

Spécifications

Compatibilité des navigateurs

Navigateur Version minimale
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

Extensions Mozilla

Les extensions Mozilla suivantes définissent les couleurs pour le côté de la bordure correspondant dans les navigateurs Gecko :

  • {{ Cssxref("-moz-border-bottom-colors") }}
  • {{ Cssxref("-moz-border-left-colors") }}
  • {{ Cssxref("-moz-border-right-colors") }}
  • {{ Cssxref("-moz-border-top-colors") }}

Voir également

{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}

Interwiki Languages Links

{{ languages( { "de": "de/CSS/border-color", "en": "en/CSS/border-color", "es": "es/CSS/border-color", "ja": "ja/CSS/border-color", "pl": "pl/CSS/border-color" } ) }}

Source de la révision

<p> </p>
<p>{{ CSSRef() }}</p>
<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
<p>La propriété <code>border-color</code> est un raccourci pour définir la couleur des quatre côtés de la bordure d'un élément.</p>
<ul> <li>Valeur initiale : la propriété {{ Cssxref("color") }} de l'élément</li> <li>S'applique à : tous les éléments</li> <li>Héritée : non</li> <li>Pourcentages : N/A</li> <li>Média : <a href="/fr/CSS/Média/Visuel" title="fr/CSS/Média/Visuel">Visuel</a></li> <li>Valeur calculée : La valeur calculée de <code>color</code> par défaut, ou celle spécifiée.</li>
</ul>
<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
<pre class="eval">border-color: [ &lt;color&gt; || transparent ]{1,4} | <em>inherit</em>
</pre>
<h3 id="Valeurs" name="Valeurs">Valeurs</h3>
<dl> <dt>&lt;color&gt; </dt> <dd>La couleur peut être définie sous forme de valeur hexadécimale RGB, une valeur classique RGB, ou en utilisant les mots clefs de couleurs prédéfinis.</dd>
</dl>
<dl> <dt>transparent </dt> <dd>La bordure n'est pas affichée, mais elle occupe l'espace qui lui est dévolu sur la page.</dd>
</dl>
<p>Vous pouvez passer jusqu'à 4 valeurs :</p>
<ul> <li>Si une seule valeur est définie, elle s'applique aux quatre cotés.</li> <li>Si deux valeurs sont définies, la première valeur s'applique aux côtés haut et bas de la bordure et la seconde aux côtés gauche et droit.</li> <li>Si trois valeurs sont définies, la premièrere s'applique au côté haut de la bordure, la deuxième aux côtés gauche et droit et la troisième au côté bas.</li> <li>Si quatre valeurs sont définies, la première s'applique au côté haut de la bordure, la deuxième au côté droit, la troisième au côté bas et la quatrième au côté gauche.</li>
</ul>
<h3 id="Exemples" name="Exemples">Exemples</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre class="eval">element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>Pour voir la bordure, vous devez également définir {{ Cssxref("border-width") }} avec une valeur positive et {{ Cssxref("border-style") }} doit être un style visible (différent de <code>none</code> ou <code>hidden</code>).</p>
<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#border-color">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-color">CSS 3</a></li>
</ul>
<h3 id="Compatibilit.C3.A9_des_navigateurs" name="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h3>
<table class="standard-table"> <tbody> <tr> <th>Navigateur</th> <th>Version minimale</th> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> </tbody>
</table>
<h3 id="Extensions_Mozilla" name="Extensions_Mozilla">Extensions Mozilla</h3>
<p>Les extensions Mozilla suivantes définissent les couleurs pour le côté de la bordure correspondant dans les navigateurs Gecko :</p>
<ul> <li>{{ Cssxref("-moz-border-bottom-colors") }}</li> <li>{{ Cssxref("-moz-border-left-colors") }}</li> <li>{{ Cssxref("-moz-border-right-colors") }}</li> <li>{{ Cssxref("-moz-border-top-colors") }}</li>
</ul>
<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3>
<p>{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}</p>
<p><span class="comment">Interwiki Languages Links</span></p>

<p>{{ languages( { "de": "de/CSS/border-color", "en": "en/CSS/border-color", "es": "es/CSS/border-color", "ja": "ja/CSS/border-color", "pl": "pl/CSS/border-color" } ) }}</p>
Revenir à cette révision