검색 결과

border-left-color

현재 문서 내

Summary
Syntax
1. Values
2. Formal syntax
Examples
1. A simple div with a border
Specifications
Browser compatibility
See also

이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 함께 해서 번역을 마치도록 도와 주세요!

Summary

The border-left-color CSS property sets the color of the left border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable.

Initial value	`currentColor`
Applies to	all elements. It also applies to `::first-letter`.
Inherited	no
Media	visual
Computed value	If the value is translucent, the computed value will be the `rgba()` corresponding one. If it isn't, it will be the `rgb()` corresponding one. The `transparent` keyword maps to `rgba(0,0,0,0)`.
Animatable	yes, as a color
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

border-left-color: red;
border-left-color: rgb(255, 255, 0);
border-left-color: hsla(100%, 50%, 25%, 0.75);
border-left-color: transparent;
border-left-color: #ffbb00;
border-left-color: currentColor;

border-left-color: inherit;

Values

<color>: Is a <color> CSS value describing the color of the left border.
inherit: Is a keyword denoting the color of the bottom border of the parent's element (which may be different from the border-left-color default value)

Formal syntax

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

Examples

A simple div with a border

HTML Content

<div class="mybox">
    <p>This is a box with a border around it.
       Note which side of the box is
       <span class="redtext">red</span>.</p>
</div>

CSS Content

.mybox {
    border: solid 0.3em gold;
    border-left-color: red;
    width: auto;
}
.redtext {
    color: red;
}

Result

Specifications

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 The definition of 'border-left-color' in that specification.	Candidate Recommendation	No significant changes, though the `transparent` keyword, now included in `<color>` which has been extended, has been formally removed.
CSS Level 2 (Revision 1) The definition of 'border-left-color' in that specification.	Recommendation	Initial definition

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.7 or earlier)^[1]	4	3.5	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (1.0)^[1]	6.5	11	1.0

[1] Gecko-based browsers like Firefox also supports the non-standard -moz-border-left-colors CSS properties that sets the left border to multiple colors.

문서 태그 및 공헌자

태그:

이 페이지의 공헌자: Krenair, Sebastianz, FranDias, fscholz, jwhitlock, jsx, trevorh, teoli, J-Mackerel, kscarfone, SiddharthBhatt, Sheppy, ethertank, Yuichiro, Jürgen Jeka, BijuGC, Qazzian, Mgjbot, Ptak82

최종 변경: Krenair, 2016. 2. 27. 오후 9:56:24