mozilla

Revision 300223 of border-bottom

  • リビジョンの URL スラグ: CSS/border-bottom
  • リビジョンのタイトル: border-bottom
  • リビジョンの ID: 300223
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント

このリビジョンの内容

{{ CSSRef() }}

概要

CSS の border-bottom プロパティは、{{ Cssxref("border-bottom-width") }}、{{ Cssxref("border-bottom-style") }}、{{ Cssxref("border-bottom-color") }} を一括指定する為のショートハンド・プロパティです。このプロパティは、前述の 3 種のプロパティの内、1 つまたは複数の値を設定するために使用することができます。各値は半角スペースで区切って、任意の順序で記述する事が出来ます。省略された値には初期値が設定されます。

  • {{ Xref_cssinitial()}} 詳細については、各個別のプロパティを参照してください。
  • 適用対象 全ての要素
  • {{Xref_cssinherited()}} 継承しない
  • 相対値の基準 N/A
  • メディア {{ Xref_cssvisual() }}
  • {{Xref_csscomputed()}} それぞれのプロパティを参照してください

構文

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

border-width
{{ Cssxref("border-width") }} を参照して下さい。
border-style
{{ Cssxref("border-style") }} を参照して下さい。
border-color
{{ Cssxref("border-color") }} を参照して下さい。

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

注釈

原則として、border-color を指定しない場合、ボーダーの色は {{ Cssxref("color") }} プロパティで指定された値によって決定されます。

仕様書

仕様 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} {{ cssxref("border-bottom-color") }} の値の変更以外の直接的な変更は無し
CSS 2.1 {{ Spec2('CSS2.1') }} 有意な変更点は無し。
CSS 1 {{ Spec2('CSS1') }}  

ブラウザの互換性

{{ CompatibilityTable() }}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 {{ CompatGeckoDesktop("1.0") }} 4 3.5 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 {{ CompatGeckoMobile("1.0") }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

参照

  • {{CSS_Reference:Border()}}
  • border-bottom 関連 CSS プロパティ: {{ CSS_Reference:Border-bottom() }}

このリビジョンのソースコード

<div>
  {{ CSSRef() }}</div>
<h2 id=".E6.A6.82.E8.A6.81">概要</h2>
<p>CSS の <code>border-bottom</code> プロパティは、{{ Cssxref("border-bottom-width") }}、{{ Cssxref("border-bottom-style") }}、{{ Cssxref("border-bottom-color") }} を一括指定する為のショートハンド・プロパティです。このプロパティは、前述の 3 種のプロパティの内、1 つまたは複数の値を設定するために使用することができます。各値は半角スペースで区切って、任意の順序で記述する事が出来ます。省略された値には初期値が設定されます。</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial()}}</dfn> 詳細については、各個別のプロパティを参照してください。</li>
  <li><dfn>適用対象</dfn> 全ての要素</li>
  <li><dfn>{{Xref_cssinherited()}}</dfn> 継承しない</li>
  <li><dfn>相対値の基準</dfn> N/A</li>
  <li><dfn>メディア</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{Xref_csscomputed()}}</dfn> それぞれのプロパティを参照してください</li>
</ul>
<h2 id=".E6.A7.8B.E6.96.87">構文</h2>
<pre class="eval">
border-bottom: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>]&nbsp;;
</pre>
<h2 id=".E5.80.A4">値</h2>
<dl>
  <dt>
    border-width</dt>
  <dd>
    {{ Cssxref("border-width") }} を参照して下さい。</dd>
  <dt>
    border-style</dt>
  <dd>
    {{ Cssxref("border-style") }} を参照して下さい。</dd>
  <dt>
    border-color</dt>
  <dd>
    {{ Cssxref("border-color") }} を参照して下さい。</dd>
</dl>
<h2 id=".E4.BE.8B">例</h2>
<pre>
element { 
    border-bottom: 1px solid #000;
}
</pre>
<h2 id=".E6.B3.A8.E9.87.88">注釈</h2>
<p>原則として、<code>border-color</code> を指定しない場合、ボーダーの色は {{ Cssxref("color") }} プロパティで指定された値によって決定されます。</p>
<h2 id=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">仕様</th>
      <th scope="col">策定状況</th>
      <th scope="col">コメント</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands" title="http://www.w3.org/TR/css3-background/#background-bottom">CSS Backgrounds and Borders Module Level 3</a></td>
      <td>{{ Spec2('CSS3 Backgrounds') }}</td>
      <td>{{ cssxref("border-bottom-color") }} の値の変更以外の直接的な変更は無し</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom" title="http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom">CSS 2.1</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>有意な変更点は無し。</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS1/#border-bottom" title="http://www.w3.org/TR/CSS1/#border-bottom">CSS 1</a></td>
      <td>{{ Spec2('CSS1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id=".E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E3.81.AE.E4.BA.92.E6.8F.9B.E6.80.A7">ブラウザの互換性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>基本サポート</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>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</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" name="See_also">参照</h2>
<ul>
  <li>{{CSS_Reference:Border()}}</li>
  <li>border-bottom 関連 CSS プロパティ: {{ CSS_Reference:Border-bottom() }}</li>
</ul>
このリビジョンへ戻す