border-bottom

  • リビジョンの URL スラッグ: CSS/border-bottom
  • リビジョンのタイトル: border-bottom
  • リビジョンの ID: 89689
  • 作成日:
  • 作成者: Yuichiro
  • 現行リビジョン いいえ
  • コメント 6 words added, 6 words removed

このリビジョンの内容

{{ CSSRef() }}

概要

border-bottom はボックスの下の境界線の幅、スタイル、色を設定するための簡略プロパティです。このプロパティは、{{ Cssxref("border-bottom-width") }}、{{ Cssxref("border-bottom-style") }}、{{ Cssxref("border-bottom-color") }}の内、1つまたは複数の値を設定するために使用することができます。省略された値には初期値が設定されます。

  • {{ Xref_cssinitial() }}: 詳細については、それぞれのプロパティを参照してください。
  • 適用対象: 全ての要素
  • {{ Xref_cssinherited() }}: しない
  • パーセンテージ: N/A
  • メディア: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: それぞれのプロパティを参照してください

構文

border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit

<border-width> 
{{ Cssxref("border-bottom-width") }} 参照。
<border-style> 
{{ Cssxref("border-bottom-style") }} 参照。
<border-color> 
{{ Cssxref("border-bottom-color") }} 参照。

サンプル

{{ CSSRefExampleLink("border") }}

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

注釈

簡略プロパティの3つの値は、任意の順序で指定することができ、1つまたは2つを省略することができます。

全ての簡略プロパティと同様に、border-bottom は、常に、省略された値にはデフォルトが設定されます。具体的には、

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

実際には以下と同じです。

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

すなわち、border-bottomの前に指定された{{ Cssxref("border-bottom-style") }}の値は無視されます。

{{ Cssxref("border-bottom-style") }}のデフォルトの値は none、 <border-style> に該当する値を指定しないということは、境界線無しを指定することを意味します。

仕様

ブラウザの互換性

ブラウザ 最も低いバージョン
Chrome 1.0
Firefox 1
Internet Explorer 4
Netscape 4
Opera 3.5

参考

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

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

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

<p>{{ CSSRef() }}</p>
<h3 name="Summary">概要</h3>
<p><code>border-bottom</code> はボックスの下の境界線の幅、スタイル、色を設定するための簡略プロパティです。このプロパティは、{{ Cssxref("border-bottom-width") }}、{{ Cssxref("border-bottom-style") }}、{{ Cssxref("border-bottom-color") }}の内、1つまたは複数の値を設定するために使用することができます。省略された値には初期値が設定されます。</p>
<ul> <li>{{ Xref_cssinitial() }}: 詳細については、それぞれのプロパティを参照してください。</li> <li>適用対象: 全ての要素</li> <li>{{ Xref_cssinherited() }}: しない</li> <li>パーセンテージ: N/A</li> <li>メディア: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: それぞれのプロパティを参照してください</li>
</ul>
<h3 name="Syntax">構文</h3>
<pre class="eval">border-bottom: [ &lt;border-width&gt; || &lt;border-style&gt; || &lt;border-color&gt; ] | <em>inherit</em>
</pre>
<h3 name="Values">値</h3>
<dl> <dt>&lt;border-width&gt; </dt> <dd>{{ Cssxref("border-bottom-width") }} 参照。</dd> <dt>&lt;border-style&gt; </dt> <dd>{{ Cssxref("border-bottom-style") }} 参照。</dd> <dt>&lt;border-color&gt; </dt> <dd>{{ Cssxref("border-bottom-color") }} 参照。</dd>
</dl>
<h3 name="Examples">サンプル</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre>element { 
    border-bottom: 1px solid #000;
}
</pre>
<h3 name="Notes">注釈</h3>
<p>簡略プロパティの3つの値は、任意の順序で指定することができ、1つまたは2つを省略することができます。</p>
<p>全ての簡略プロパティと同様に、<code>border-bottom</code> は、常に、省略された値にはデフォルトが設定されます。具体的には、</p>
<pre>  border-bottom-style: dotted;
  border-bottom: thick green;
</pre>
<p>実際には以下と同じです。</p>
<pre>  border-bottom-style: dotted;
  border-bottom: none thick green;
</pre>
<p>すなわち、<code>border-bottom</code>の前に指定された{{ Cssxref("border-bottom-style") }}の値は無視されます。</p>
<p>{{ Cssxref("border-bottom-style") }}のデフォルトの値は <code>none</code>、 &lt;border-style&gt; に該当する値を指定しないということは、境界線無しを指定することを意味します。</p>
<h3 name="Specifications">仕様</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#border-bottom">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li>
</ul>
<h3 name="Browser_compatibility">ブラウザの互換性</h3>
<table class="standard-table"> <tbody> <tr> <th>ブラウザ</th> <th>最も低いバージョン</th> </tr> <tr> <td>Chrome</td> <td>1.0</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Internet Explorer</td> <td>4</td> </tr> <tr> <td>Netscape</td> <td>4</td> </tr> <tr> <td>Opera</td> <td>3.5</td> </tr> </tbody>
</table>
<h3 name="See_also">参考</h3>
<p>{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},</p>
<p>{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "es": "es/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}</p>
Revert to this revision