border-bottom

  • Raccourci de la révision : CSS/border-bottom
  • Titre de la révision : border-bottom
  • ID de la révision : 462697
  • 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 {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }} et {{ Cssxref("border-bottom-width") }}. ces propriétés définissent les bordures inférieures des éléments.

Les trois valeurs de la propriété raccourcie peuvent être définis dans n'importe quel ordre, et une ou deux d'entre elles peuvent être omises.

Comme pour toutes les propriétés raccourcies, border-bottom définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si elles ne sont pas mentionnées. Celles qui ne sont pas mentionnées sont définies à leurs valeur par défaut. ceci signifie que :

  border-bottom-style: dotted;
  border-bottom: thick green;
équivaut à :
  border-bottom-style: dotted;
  border-bottom: none thick green;
et la valeur de {{ Cssxref("border-bottom-style") }} donnée avant border-bottom est ignorée.

 

Puisque la valeur par défaut de {{ Cssxref("border-bottom-style") }} est none, ne pas mentionner la partie de la valeur référant à border-style signifie que la propriété prendra sa valeur par défaut, qui est none et il n'y aura pas de bordure.

{{cssbox("border-bottom")}}

Syntaxe

Syntaxe formelle : {{csssyntax("border-bottom")}}

Valeurs

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

Exemples

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

Spécifications

Spécification Statut Commentaire
{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }} {{ Spec2('CSS3 Backgrounds') }} Pas de modification directe. Toutefois, les modifications pour les valeurs de {{ cssxref("border-bottom-color") }} s'appliquent.
{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }} {{ Spec2('CSS2.1') }} Pas de modification significative.
{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }} {{ Spec2('CSS1') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 {{ CompatGeckoDesktop("1.0") }} 4 3.5 1.0 (85)
Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base 1.0 {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown }} {{ CompatVersionUnknown }} {{ CompatVersionUnknown }}

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="CSS">CSS</a> <code>border-bottom</code> est un raccourci pour la définition de {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }} et {{ Cssxref("border-bottom-width") }}. ces propriétés définissent les bordures inférieures des éléments.</p>
<div class="note">
  <p>Les trois valeurs de la propriété raccourcie peuvent être définis dans n'importe quel ordre, et une ou deux d'entre elles peuvent être omises.</p>
  <p>Comme pour toutes les propriétés raccourcies, <code>border-bottom</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si elles ne sont pas mentionnées. Celles qui ne sont pas mentionnées sont définies à leurs valeur par défaut. ceci signifie que :</p>
  <pre class="brush: css">
  border-bottom-style: dotted;
  border-bottom: thick green;</pre>
  équivaut à :<br />
  <pre class="brush: css">
  border-bottom-style: dotted;
  border-bottom: none thick green;</pre>
  et la valeur de {{ Cssxref("border-bottom-style") }} donnée avant <code>border-bottom</code> est ignorée.
  <p>&nbsp;</p>
  <p>Puisque la valeur par défaut de {{ Cssxref("border-bottom-style") }} est <code>none</code>, ne pas mentionner la partie de la valeur référant à border-style signifie que la propriété prendra sa valeur par défaut, qui est <code>none</code> et il n'y aura pas de bordure.</p>
</div>
<p>{{cssbox("border-bottom")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">
<a href="/fr/docs/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs" title="/fr/docs/CSS/CSS_values_syntax">Syntaxe formelle</a> : {{csssyntax("border-bottom")}}
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>&lt;br-width&gt;</code></dt>
  <dd>
    Voir {{ Cssxref("border-bottom-width") }}.</dd>
  <dt>
    <code>&lt;br-style&gt; </code></dt>
  <dd>
    Voir {{ Cssxref("border-bottom-style") }}.</dd>
  <dt>
    <code>&lt;color&gt; </code></dt>
  <dd>
    Voir {{ Cssxref("border-bottom-color") }}.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: css">
element { 
    border-bottom: 1px solid #000;
}
</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</th>
      <th scope="col">Commentaire</th>
    </tr>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>Pas de modification directe. Toutefois, les modifications pour les valeurs de {{ cssxref("border-bottom-color") }} s'appliquent.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Pas de modification significative.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4</td>
        <td>3.5</td>
        <td>1.0 (85)</td>
      </tr>
    </tbody>
  </table>
</div>
<table class="compat-table">
  <tbody>
    <tr>
      <th>Fonction</th>
      <th>Android</th>
      <th>Firefox Mobile (Gecko)</th>
      <th>IE Phone</th>
      <th>Opera Mobile</th>
      <th>Safari Mobile</th>
    </tr>
    <tr>
      <td>Support de base</td>
      <td>1.0</td>
      <td>{{ CompatGeckoMobile("1.0") }}</td>
      <td>{{ CompatVersionUnknown }}</td>
      <td>{{ CompatVersionUnknown }}</td>
      <td>{{ CompatVersionUnknown }}</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