border-bottom

概要

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

  • 初期値 個別のプロパティの頁を参照してください
  • 適用対象 全要素
  • 継承 継承しない
  • 相対値の基準 無し
  • メディア visual
  • 計算値 個別のプロパティの頁を参照してください

構文

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

値

border-width
ボーダーの幅
border-style
ボーダーの種類を表すキーワード
border-color
ボーダーの色

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

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

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

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

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

例

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

実際の表示を確認

仕様書

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補 border-bottom-color の値の変更以外の直接的な変更は無し
CSS 2.1 勧告 有意な変更点は無し
CSS 1 勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.7 or earlier) 4 3.5 1.0 (85)
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1.0) (有) (有) (有)

関連情報

Document Tags and Contributors

タグ:
Contributors to this page: ethertank, Yuichiro
最終更新者: ethertank,
サイドバーを隠す