border-top-color CSS 속성은 요소의 위쪽 테두리 색상을 지정합니다. border-color 또는 border-top 단축 속성으로도 지정할 수 있습니다.

구문

/* <color> 값 */
border-top-color: red;
border-top-color: #ffbb00;
border-top-color: rgb(255, 0, 0);
border-top-color: hsla(100%, 50%, 25%, 0.75);
border-top-color: currentColor;
border-top-color: transparent;

/* 전역 값 */
border-top-color: inherit;
border-top-color: initial;
border-top-color: unset;

border-top-color 속성은 하나의 값을 사용해 지정합니다.

<color>
위쪽 테두리의 색상.

형식 구문

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

예제

테두리를 가진 간단한 상자

HTML

<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

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

.redtext {
  color: red;
}

결과

명세

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-top-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-top-color' in that specification.
Recommendation Initial definition
초기값currentcolor
적용대상all elements. It also applies to ::first-letter.
상속no
Mediavisual
Computed valuecomputed color
Animation typea color
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
border-top-colorChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Firefox also supports the non-standard -moz-border-top-colors CSS property that sets the top border to multiple colors.
IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Firefox also supports the non-standard -moz-border-top-colors CSS property that sets the top border to multiple colors.
Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta
최종 변경자: alattalatta,