CSS 밴더 색상 속성

정의와 사용법

border-color 속성은 1개에서 4개의 색상을 설정할 수 있습니다.

border-color 속성은 단축 속성으로, 요소의 모든 경계선의 보이는 부분의 색상을 설정하거나 4개의 경계선에 각각 다른 색상을 설정할 수 있습니다. 아래 예제를 참조하세요:

예제 1

border-color:red green blue pink;
  • 위 경계선은 빨간색입니다
  • 右边框은 녹색입니다
  • 아래 경계선은 파란색입니다
  • 왼쪽 경계선은 핑크색입니다

예제 2

border-color:red green blue;
  • 위 경계선은 빨간색입니다
  • 오른쪽 경계선과 왼쪽 경계선이 녹색입니다
  • 아래 경계선은 파란색입니다

예제 3

border-color:dotted red green;
  • 위 경계선과 아래 경계선이 빨간색입니다
  • 오른쪽 경계선과 왼쪽 경계선이 녹색입니다

예제 4

border-color:red;
  • 모든 네 가지 경계선이 빨간색입니다

경계선 스타일은 none 또는 hidden으로 설정할 수 없습니다. 그렇지 않으면 경계선이 나타나지 않습니다.

주석:항상 border-style 속성을 border-color 속성보다 먼저 선언해야 합니다. 요소는 색상을 변경하기 전에 경계선을 얻어야 합니다.

다른 것을 참조하세요:

CSS 강의:CSS 경계선

HTML DOM 참조 매뉴얼:borderColor 속성

예제

네 가지 경계선의 색상을 설정합니다:

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

직접 테스트해 보세요

CSS 문법

border-color: color|transparent|initial|inherit;

속성 값

값 설명
color_name 색상 이름을 가진 경계선 색상을 정의합니다(예: red).
hex_number 색상 값이 십육진수 값인 경계선 색상을 정의합니다(예: #ff0000).
rgb_number rgb 코드의 색상 값(예: rgb(255,0,0))을 가진 경계선 색상을 정의합니다.
transparent 기본 값. 경계선 색상은 투명합니다.
inherit 부모 요소에서 경계선 색상을 상속해야 합니다.

기술 세부 사항

기본 값: not specified
상속성: no
버전: CSS1
JavaScript 문법: object.style.borderColor="#FF0000 blue"

더 많은 예제

네 가지 경계선의 색상 설정
이 예제에서는 네 가지 경계선의 색상을 설정하는 방법을 보여줍니다. 한 가지에서 네 가지 색상 중 하나를 설정할 수 있습니다.

브라우저 지원

표에서는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전이 기재되어 있습니다.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5

주석:Internet Explorer 6( 및 이전 버전)는 속성 값 "transparent"을 지원하지 않습니다.

주석:IE7 및 이전 버전의 브라우저는 값 "inherit"을 지원하지 않습니다. IE8은 !DOCTYPE가 필요합니다. IE9는 "inherit"을 지원합니다.