border-bottom

概要

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

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素. It also applies to ::first-letter.
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序order of appearance in the formal grammar of the values

構文

<br-width> || <br-style> || <color>

where
<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

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) (有) (有) (有)

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: fscholz, Sebastianz, ethertank, Yuichiro
 最終更新者: fscholz,