border-color 속성의 이해

border-color 속성은
요소 경계 테두리의 색상을 지정합니다.

이 속성은 요소의 네 경계면(위, 아래, 왼쪽, 오른쪽) 테두리 색상을 한 번에 지정할 수 있는 다음의 구성 속성들의 단축 속성(shorthand property)입니다.
이 속성들을 사용하면 해당하는 한 쪽 면의 테두리 색상을 개별적으로 지정할 수 있습니다.

border-color 속성의 구성 속성
border-top-color 요소 위쪽 테두리의 색상을 지정합니다.
border-bottom-color 요소 아래쪽 테두리의 색상을 지정합니다.
border-left-color 요소 왼쪽 테두리의 색상을 지정합니다.
border-right-color 요소 오른쪽 테두리의 색상을 지정합니다.

border-color 속성은 요소 경계의 네 면의 테두리 색상을 한 번에 설정하고 싶을 때 유용합니다.

데모

다음의 CSS 데모로 border-color 속성의 사용 방법을 확인해 보세요.

CSS 데모: border-color 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    border-color: <색상>
}

구문

CSS 
/* 네 측면 모두 적용 */
border-color: red;
border-color: currentcolor; /* 초깃값 */

/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
border-color: red #cc9900; /* red: 위와 아래 측면,
                              #cc9900: 왼쪽과 오른쪽 측면 */

/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
border-color: red #cc9900 green; /* red: 위 측면,
                                    #cc9900: 왼쪽과 오른쪽 측면,
                                    green: 아래 측면 */

/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */
/* 시계 방향으로 */
border-color: red green blue olive; /* red: 위 측면,
                                       green: 오른쪽 측면,
                                       blue: 아래 측면,
                                       olive: 왼쪽 측면 */

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

값

<색상> 값을 사용할 수 있습니다. 이 값은 CSS에서 지원하는 색상 값입니다.

currentcolor(현재 요소의 글자색)입니다.

예제
HTML 
<p>테두리 색상의 초깃값은 현재 요소의 글자색입니다.</p>
CSS 
p {
    color: red;
    border-width: 7px;
    border-style: solid;
    /* border-color를 지정하지 않았지만
       초깃값인 현재 요소의 글자색인 red로 설정된다. */
} 

/* 요소에 마우스를 올려 놓았을 동안에는
   테두리 색상은 글자색인 blue로 설정된다. */
p:hover {
    color: blue;
}

코드 부연설명
border-width 속성은 요소 경계 테두리의 두께, 즉 너비를 지정합니다.

코드 부연설명
border-style 속성은 요소 경계 테두리의 스타일을 지정합니다.

코드 부연설명
:hover 가상 클래스 선택자는 요소에 마우스 커서를 올려 놓았을 동안 해당 요소를 선택합니다.

실제 적용된 모습 요소에 마우스 커서를 올려 보세요.
요소에 마우스 커서를 올려 놓았을 동안에는 테두리 색상이 글자색인 blue로 설정됩니다.

형식 정의

border-color 속성의 형식 정의
초깃값
적용 요소 모든 요소
상속 아니오
애니메이션
  • border-top-color: 예
  • border-bottom-color: 예
  • border-left-color: 예
  • border-right-color: 예

값 지정하기

border-color 속성은 한 개, 두 개, 세 개, 네 개의 값으로 지정할 수 있습니다.

한 개 값

한 개의 값을 지정하면 이 값이 네 측면 모두에 적용됩니다.

CSS 
/* 네 측면 모두 적용 */
border-color: red;
예제
HTML 
<p>border-color 한 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 15px;
    border-color: red;
}
실제 적용된 모습

두 개 값

두 개의 값을 지정하면 첫 번째는 위와 아래 측면, 두 번째는 왼쪽과 오른쪽 측면에 적용됩니다.

CSS 
/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
border-color: red #cc9900; /* red: 위와 아래 측면,
                              #cc9900: 왼쪽과 오른쪽 측면 */
예제
HTML 
<p>border-color 두 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 15px;
    border-color: red #cc9900;
}
실제 적용된 모습

세 개 값

세 개의 값을 지정하면 첫 번째는 위 측면, 두 번째는 왼쪽과 오른쪽 측면, 세 번째는 아래 측면에 적용됩니다.

CSS 
/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
border-color: red #cc9900 green; /* red: 위 측면,
                                    #cc9900: 왼쪽과 오른쪽 측면,
                                    green: 아래 측면 */
예제
HTML 
<p>border-color 세 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 15px;
    border-color: red #cc9900 green;
}
실제 적용된 모습

네 개 값

세 개의 값을 지정하면 시계 방향 순서대로 첫 번째는 위 측면, 두 번째는 오른쪽 측면, 세 번째는 아래 측면, 네 번째는 왼쪽 측면에 적용됩니다.

CSS 
/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */
/* 시계 방향으로 */
border-color: red green blue olive; /* red: 위 측면,
                                       green: 오른쪽 측면,
                                       blue: 아래 측면,
                                       olive: 왼쪽 측면 */
예제
HTML 
<p>border-color 네 개 값 적용</p>
CSS 
p {
    border-style: solid;
    border-width: 15px;
    border-color: red green blue olive;
}
실제 적용된 모습

브라우저 호환성

border-color 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
border-color 1 12 1 1

명세서

border-color 속성의 명세서 사양
명세서 사양
border-color CSS Backgrounds and Borders Module Level 3
#border-color

참고문헌

같이 보기