border-color 속성

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

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

구문

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

값의 개수

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

예시

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

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

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

Результат:

예시

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

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

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

Результат:

예시

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

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

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

Результат:

예시

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

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

css#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 속성의 값을 사용합니다:

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

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

Результат:

참고 항목