Style borderColor 속성

정의와 사용법

borderColor 속성은 요소 경계선의 색상을 설정하거나 반환합니다.

이 속성은 하나에서 네 개의 값을 취할 수 있습니다:

  • 한 가지 값, 예를 들어: p {border-color: red} - 모든 네 가지 경계선이 빨간색입니다
  • 두 가지 값으로 예：p {border-color: red transparent} - 상하 경계선은 빨간색이며, 좌우 경계선은 투명합니다
  • 세 가지 값으로 예：p {border-color: red green blue}- 상 경계선은 빨간색이며, 좌우 경계선은緑색이며, 하 경계선은 파란색입니다
  • 네 가지 값으로 예：p {border-color: red green blue yellow} - 상 경계선은 빨간색이며, 우 경계선은緑색이며, 하 경계선은 파란색이며, 좌 경계선은 노란색입니다

다른 것도 참조하십시오：

CSS 강의：CSS 경계선

CSS 참조 매뉴얼：border-color 속성

HTML DOM 참조 매뉴얼：border 속성

예제

예제 1

<div> 요소의 네 가지 경계선의 색상을 빨간색으로 변경합니다：

document.getElementById("myDiv").style.borderColor = "red";

직접 시험해 보세요

예제 2

<div> 요소의 상하 경계선 색상을 녹색으로, 좌우 경계선 색상을 보라색으로 변경합니다：

document.getElementById("myDiv").style.borderColor = "green purple";

직접 시험해 보세요

예제 3

<div> 요소의 경계선 색상 반환：

alert(document.getElementById("myDiv").style.borderColor);

직접 시험해 보세요

문법

borderColor 속성 반환：

object.style.borderColor

borderColor 속성 설정：

object.style.borderColor = "color|transparent|initial|inherit"

속성 값

값 설명
color

경계선의 색상을 정의합니다. 기본 색상은 검은색입니다。

다음을 확인하십시오 CSS 색상 값，가능한 색상 값의 전체 목록을 확인하십시오。
transparent 경계선의 색상은 투명합니다（하위 내용이 투명하게 나타납니다）。
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： black
반환 값： 문자열로, 요소의 경계선 색상을 나타냅니다。
CSS 버전： CSS1

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

Chrome Edge Firefox 사파리 오페라
Chrome Edge Firefox 사파리 오페라
1.0 4.0 1.0 1.0 3.5