border-color 속성

border-color 속성은 모든 면의 테두리 색상을 동시에 또는 각 면별로 따로 지정합니다. 속성 값으로는 색상 단위를 사용합니다. 기본값은 해당 블록의 텍스트 색상과 동일합니다.

이 속성은 다음과 같은 속성들을 위한 단축 속성입니다: border-left-color, border-right-color, border-top-color, border-bottom-color.

구문

선택자 {
	border-color: 색상;
}

값의 개수

이 속성은 1, 2, 3 또는 4개의 값을 공백으로 구분하여 지정할 수 있습니다:

개수	설명
`1`	모든 면에 동일하게 적용됩니다.
`2`	첫 번째 값은 위쪽과 아래쪽, 두 번째 값은 왼쪽과 오른쪽 테두리에 적용됩니다.
`3`	첫 번째 값은 위쪽, 두 번째 값은 왼쪽과 오른쪽, 세 번째 값은 아래쪽 테두리에 적용됩니다.
`4`	첫 번째 값은 위쪽 테두리, 두 번째 값은 오른쪽 테두리, 세 번째 값은 아래쪽 테두리, 네 번째 값은 왼쪽 테두리에 적용됩니다.

예시

블록의 테두리를 빨간색으로 지정해 봅시다:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red;
	width: 300px;
	height: 100px;
}

예시

위쪽과 아래쪽 테두리는 빨간색으로, 오른쪽과 왼쪽 테두리는 파란색으로 지정합니다:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue;
	width: 300px;
	height: 100px;
}

예시

위쪽 테두리는 빨간색, 오른쪽 테두리는 파란색, 아래쪽 테두리는 초록색, 왼쪽 테두리는 검은색으로 지정합니다:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

예시

테두리의 두께, 스타일, 색상을 동시에 다르게 지정합니다:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

예시

border-color에서 테두리 색상이 지정되지 않으면, color 속성의 값을 사용합니다:

<div id="elem"></div>

#elem {
	color: red;
	border-style: solid;
	border-width: 2px;
	width: 300px;
	height: 100px;
}

참고 항목

테두리 두께를 지정하는 border-width 속성
테두리 스타일을 지정하는 border-style 속성
테두리를 위한 단축 속성인 border 속성