border-bottom

  • リビジョンの URL スラッグ: Web/CSS/border-bottom
  • リビジョンのタイトル: border-bottom
  • リビジョンの ID: 397377
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン はい
  • コメント Moved From CSS/border-bottom to Web/CSS/border-bottom

このリビジョンの内容

{{ CSSRef() }}

概要

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

  • {{ Xref_cssinitial()}} 個別のプロパティの頁を参照してください
  • 適用対象 全要素
  • {{Xref_cssinherited()}} 継承しない
  • 相対値の基準 無し
  • メディア {{ Xref_cssvisual() }}
  • {{Xref_csscomputed()}} 個別のプロパティの頁を参照してください

構文

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

{{ Cssxref("border-width") }}
ボーダーの幅
{{ Cssxref("border-style") }}
ボーダーの種類を表すキーワード
{{ Cssxref("border-color") }}
ボーダーの色

このショートハンドプロパティの 3 つの値は任意の順序で指定可能で、また、一つないし二つの値を省略する事もできます。

他の全てのショートハンドプロパティと同様に、border-bottom は、何れかの値が指定されていない場合でも常に、すべてのプロパティの値を設定します。指定されていないものには、それぞれ個別プロパティのデフォルト値が設定されます。

border-width: 1px;
border-bottom: thick green;

上記コードの 1 行目で指定した筈の border-width は、2 行目のショートハンドプロパティで幅の値が未設定の為、ここには {{cssxref("border-width")}} の初期値である none が適用され、よって 1 行目の指定は上書きされ、ボーダーは表示されません。以下の様に指定した場合と同じ状態になるという事です。

border-width: 1px;
border-bottom: none thick green;

.black {
	padding: 10px;
	width: 300px;
	border: 1px solid #000;
}

{{ CSSRefExampleLink("border") }}

仕様書

仕様書 策定状況 コメント
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()}}
  • {{ CSS_Reference:Border-bottom() }}

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

<div>
  {{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">概要</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> 無し</li>
  <li><dfn>メディア</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{Xref_csscomputed()}}</dfn> 個別のプロパティの頁を参照してください</li>
</ul>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">
border-bottom: [<em>border-width</em> || <em>border-style</em> || <em>border-color</em> | <em>inherit</em>];</pre>
<h2 id="Values" name="Values">値</h2>
<dl>
  <dt>
    {{ Cssxref("border-width") }}</dt>
  <dd>
    ボーダーの幅</dd>
  <dt>
    {{ Cssxref("border-style") }}</dt>
  <dd>
    ボーダーの種類を表すキーワード</dd>
  <dt>
    {{ Cssxref("border-color") }}</dt>
  <dd>
    ボーダーの色</dd>
</dl>
<div class="note">
  <p>このショートハンドプロパティの 3 つの値は任意の順序で指定可能で、また、一つないし二つの値を省略する事もできます。</p>
  <p>他の全てのショートハンドプロパティと同様に、<code>border-bottom</code> は、何れかの値が指定されていない場合でも常に、すべてのプロパティの値を設定します。<strong>指定されていないものには、それぞれ個別プロパティのデフォルト値が設定されます。</strong></p>
  <pre class="brush:css">
border-width: 1px;
border-bottom: thick green;</pre>
  <p>上記コードの 1 行目で指定した筈の <code>border-width</code> は、2 行目のショートハンドプロパティで幅の値が未設定の為、ここには {{cssxref("border-width")}} の初期値である <code>none</code> が適用され、よって 1 行目の指定は上書きされ、ボーダーは表示されません。以下の様に指定した場合と同じ状態になるという事です。</p>
  <pre class="brush:css">
border-width: 1px;
border-bottom: none thick green;</pre>
</div>
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush:css;highlight:[4];">
.black {
	padding: 10px;
	width: 300px;
	border: 1px solid #000;
}</pre>
<p>{{ CSSRefExampleLink("border") }}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
  <thead>
    <tr>
      <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="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</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>{{ CSS_Reference:Border-bottom() }}</li>
</ul>
Revert to this revision