border-bottom

  • Revision slug: CSS/border-bottom
  • Revision title: border-bottom
  • Revision id: 354697
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef }}

Summary

The border-bottom CSS property is a shorthand that sets the values of {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, and {{ Cssxref("border-bottom-width") }}. These properties describe the bottom border of elements.

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

As with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:

  border-bottom-style: dotted;
  border-bottom: thick green;
is actually the same as
  border-bottom-style: dotted;
  border-bottom: none thick green;
and the value of {{ Cssxref("border-bottom-style") }} given before border-bottom is ignored.

 

Since the default value of {{ Cssxref("border-bottom-style") }} is none, not specifying the border-style part of the value means that the property specifies its default value which is none and means no border.

  • {{ Xref_cssinitial() }} {{cssinitial("border-bottom")}}
  • Applies to all elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} see individual properties

Syntax

Formal syntax: {{csssyntax("border-bottom")}}

where:

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

Examples

{{ CSSRefExampleLink("border") }}

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

Specifications

Specification Status Comment
{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }} {{ Spec2('CSS3 Backgrounds') }} No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }} {{ Spec2('CSS2.1') }} No significant changes
{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }} {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 4 3.5 1.0 (85)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown }} {{ CompatVersionUnknown }} {{ CompatVersionUnknown }}

See also

  • {{ CSS_Reference:Border-bottom }}.
  • {{ CSS_Reference:Border }}.

Revision Source

<div>
  {{ CSSRef }}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>border-bottom</code> <a href="/en/CSS" title="CSS">CSS</a> property is a shorthand that sets the values of {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, and {{ Cssxref("border-bottom-width") }}. These properties describe the bottom border of elements.</p>
<div class="note">
  <p>The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.</p>
  <p>As with all shorthand properties, <code>border-bottom</code> always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:</p>
  <pre>
  border-bottom-style: dotted;
  border-bottom: thick green;</pre>
  is actually the same as
  <pre>
  border-bottom-style: dotted;
  border-bottom: none thick green;</pre>
  and the value of {{ Cssxref("border-bottom-style") }} given before <code>border-bottom</code> is ignored.
  <p>&nbsp;</p>
  <p>Since the default value of {{ Cssxref("border-bottom-style") }} is <code>none</code>, not specifying the border-style part of the value means that the property specifies its default value which is <code>none</code> and means no border.</p>
</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{cssinitial("border-bottom")}}</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> see individual properties</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="/en-US/docs/CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("border-bottom")}}
</pre>
<p>where:</p>
<dl>
  <dt>
    &lt;br-width&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-bottom-width") }}.</dd>
  <dt>
    &lt;br-style&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-bottom-style") }}.</dd>
  <dt>
    &lt;color&gt;&nbsp;</dt>
  <dd>
    See {{ Cssxref("border-bottom-color") }}.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre class="brush:css; highlight:[2]">
element { 
    border-bottom: 1px solid #000;
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}</td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}</td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>No significant changes</td>
    </tr>
    <tr>
      <td>{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}</td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</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>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatVersionUnknown }}</td>
        <td>{{ CompatVersionUnknown }}</td>
        <td>{{ CompatVersionUnknown }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Border-bottom }}.</li>
  <li>{{ CSS_Reference:Border }}.</li>
</ul>
Revert to this revision