border-left

概要

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

構文

<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>

ボーダーの色

例

blockquote { 
    border-left: 10px solid #555;
}

仕様

ブラウザ実装状況