border-bottom

  • Raccourci de la révision : CSS/border-bottom
  • Titre de la révision : border-bottom
  • ID de la révision : 448901
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS border-bottom est un raccourci pour la définition de la largeur, du style et de la couleur de la bordure inférieure d'une boîte. Cette propriété peut être utilisée pour définir les valeurs pour l'une ou plusieurs propriétés {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }} ou {{ Cssxref("border-bottom-color") }}. Les valeurs omises sont définies à leur valeur initiale.

  • {{Xref_cssinitial}} voir les propriétés individuelles pour les détails
  • S'applique à tous les éléments
  • {{Xref_cssinherited}} non
  • Média {{Xref_cssvisual}}
  • {{Xref_csscomputed}} voir les propriétés individuelles

Syntaxe

border-bottom: [border-width || border-style || border-color | inherit] ;

Valeurs

border-width 
Voir {{ Cssxref("border-bottom-width") }}.
border-style 
Voir {{ Cssxref("border-bottom-style") }}.
border-color 
Voir {{ Cssxref("border-bottom-color") }}.

Exemples

element { 
    border-bottom: 1px solid #000;
}

Notes

Si la règle ne spécifie pas de couleur pour la bordure, cette dernière aura la couleur spécifiée par la propriété {{ Cssxref("color") }}.

Les trois valeurs de ce raccourci peuvent être spécifiées dans n'importe quel ordre, et une ou deux valeurs peuvent être omises.

Comme pour toutes les propriétés raccourcies, border-bottom initialise toutes les propriétés qui peuvent la composer, même si elles ne sont pas spécifiées. Dans ce cas, elles sont alors définies à leur valeur par défaut. Cela signifie que :

 border-bottom-style: dotted;
 border-bottom: thick green;

sera identique à:

 border-bottom-style: dotted;
 border-bottom: none thick green;

et la valeur de {{ Cssxref("border-bottom-style") }} indiquée avant border-bottom est ignorée.

Depuis que la valeur par défaut de {{ Cssxref("border-bottom-style") }} est none, ne pas spécifier la partie border-style de la propriété raccourcie signifie que celle-ci indique: pas de bordure.

Spécifications

Compatibilité des navigateurs

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

Voir également

{{ Référence_CSS:Border() }} {{ Référence_CSS:Border-bottom() }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>border-bottom</code> est un raccourci pour la définition de la largeur, du style et de la couleur de la bordure inférieure d'une boîte. Cette propriété peut être utilisée pour définir les valeurs pour l'une ou plusieurs propriétés {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }} ou {{ Cssxref("border-bottom-color") }}. Les valeurs omises sont définies à leur valeur initiale.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}}&nbsp;</dfn>voir les propriétés individuelles pour les détails</li>
  <li><dfn>S'applique à&nbsp;</dfn>tous les éléments</li>
  <li><dfn>{{Xref_cssinherited}}&nbsp;</dfn>non</li>
  <li><dfn>Média&nbsp;</dfn>{{Xref_cssvisual}}</li>
  <li><dfn>{{Xref_csscomputed}}&nbsp;</dfn>voir les propriétés individuelles</li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
border-bottom: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>]&nbsp;;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    border-width&nbsp;</dt>
  <dd>
    Voir {{ Cssxref("border-bottom-width") }}.</dd>
  <dt>
    border-style&nbsp;</dt>
  <dd>
    Voir {{ Cssxref("border-bottom-style") }}.</dd>
  <dt>
    border-color&nbsp;</dt>
  <dd>
    Voir {{ Cssxref("border-bottom-color") }}.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="eval">
element { 
    border-bottom: 1px solid #000;
}
</pre>
<h2 id="Notes">Notes</h2>
<p>Si la règle ne spécifie pas de couleur pour la bordure, cette dernière aura la couleur spécifiée par la propriété {{ Cssxref("color") }}.</p>
<p>Les trois valeurs de ce raccourci peuvent être spécifiées dans n'importe quel ordre, et une ou deux valeurs peuvent être omises.</p>
<p>Comme pour toutes les propriétés raccourcies, <code>border-bottom</code> initialise toutes les propriétés qui peuvent la composer, même si elles ne sont pas spécifiées. Dans ce cas, elles sont alors définies à leur valeur par défaut. Cela signifie que&nbsp;:</p>
<pre class="eval">
 border-bottom-style: dotted;
 border-bottom: thick green;
</pre>
<p>sera identique à:</p>
<pre class="eval">
 border-bottom-style: dotted;
 border-bottom: none thick green;
</pre>
<p>et la valeur de {{ Cssxref("border-bottom-style") }} indiquée avant <code>border-bottom</code> est ignorée.</p>
<p>Depuis que la valeur par défaut de {{ Cssxref("border-bottom-style") }} est <code>none</code>, ne pas spécifier la partie <em>border-style</em> de la propriété raccourcie signifie que celle-ci indique: pas de bordure.</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css1/#border-bottom">CSS 1 (fr)</a></li>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/box.html#propdef-border-bottom">CSS 2 (fr)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom">CSS 2.1 (en)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3 (en)</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<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>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Référence_CSS:Border() }} {{ Référence_CSS:Border-bottom() }}</p>
Revenir à cette révision