Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

CSS の border-top プロパティは、border-top-widthborder-top-styleborder-top-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-width を参照して下さい。
border-style
border-style を参照して下さい。
border-color
border-color を参照して下さい。

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

注釈

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

仕様書

仕様 策定状況 コメント
CSS Backgrounds and Borders Module Level 3 勧告候補 border-top-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,