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

概要

border プロパティは、スタイルシート内の 1 ヶ所で境界線各プロパティ値を設定する簡略化プロパティです。border は、border-widthborder-styleborder-color の内、1 つまたは複数の値を設定するために使用することができます。

簡略化プロパティでは、値が指定されなかったプロパティに初期値がセットされます。また、border-image はこの簡略化プロパティからセットできませんが、初期値である none にリセットされる点に注意してください。このため border は、カスケード上、先にセットされたすべてのボーダーの設定をリセットするのに使えます。W3C は今後の level の仕様でもこの特性を保持するつもりなので、このメソッドをボーダー設定のリセットに使うことが推奨されます。

注記: border-widthborder-styleborder-color プロパティ、さらに marginpadding といった簡略化プロパティでは、4 つまでの値を受けつけ、ボーダーごとに異なった幅、スタイル、色をセットできます。しかしながら、border プロパティが受けつけるのはプロパティごとに 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
オプション。存在しない場合デフォルト値 medium が使用されます。border-width を参照してください。
border-style
必須。存在しない場合デフォルト値 none が使用されます。border-style を参照してください。
border-color
オプション。存在しない場合はデフォルト値になります。境界線のデフォルト値は要素の color プロパティ(前景色)になります。border-color を参照してください。

element { border: dashed }          /* 破線で中程度の太さの境界線、色はテキストと同じ。 */
element { border: dotted 1.5em }    /* 破線で 1.5em の太さの境界線、色はテキストと同じ。 */
element { border: solid red }       /* 赤色実線で中程度の太さの境界線。 */
element { border: solid blue 10px } /* 青色実線で 10px の太さの境界線。 */

注意

border-widthborder-styleborder-color のプロパティは 4 個の値を取ることができますが、border プロパティはそれぞれプロパティの 1 個分の値しか受けつけません。

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
border の定義
勧告候補 transparent は有効な <color>であるため、規則上はサポートが外されますが、実質的な影響はありません。borderborder-image を初期値(none)に戻します。borderborder-image にこれ以外の値はセットできません。
CSS Level 2 (Revision 1)
border の定義
勧告 inherit キーワードを受けつけます。また、transparent を有効な色として受けつけます
CSS Level 1
border の定義
勧告  

ブラウザの互換性

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本機能 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0 (85)
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本機能 1.0 (1.9.2) ? ? ? 1.0

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

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