border

概要

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

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

構文

<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-width、 border-style、 border-color のプロパティは 4 個の値を取ることができますが、border プロパティはそれぞれプロパティの 1 個分の値しか受けつけません。

仕様

ブラウザの互換性