스타일 borderColor 속성
예시
<div> 요소의 네 테두리 색상을 빨간색으로 변경합니다.
document.getElementById("myDiv").style.borderColor = "red";
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
borderColor 속성은 요소의 테두리 색상을 설정하거나 반환합니다.
이 속성은 1~4개의 값을 가질 수 있습니다.
- p {border-color: red}와 같은 하나의 값 - 네 개의 테두리가 모두 빨간색이 됩니다.
- p {border-color: red transparent}와 같은 두 가지 값 - 위쪽 및 아래쪽 테두리는 빨간색, 왼쪽 및 오른쪽 테두리는 투명합니다.
- 다음과 같은 세 가지 값: p {border-color: red green blue}- 위쪽 테두리는 빨간색, 왼쪽 및 오른쪽 테두리는 녹색, 아래쪽 테두리는 파란색
- 다음과 같은 네 가지 값: p {border-color: red green blue yellow} - 위쪽 테두리는 빨간색, 오른쪽 테두리는 녹색, 아래쪽 테두리는 파란색, 왼쪽 테두리는 노란색
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
통사론
borderColor 속성을 반환합니다.
object.style.borderColor
borderColor 속성을 설정합니다.
object.style.borderColor = "color|transparent|initial|inherit"
속성 값
Value | Description |
---|---|
color | Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element |
transparent | The color of the border is transparent (underlying content will shine through) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 현재 색상 |
---|---|
반환 값: | 요소의 테두리 색상을 나타내는 String |
CSS 버전 | CSS1 |
더 많은 예
예시
<div> 요소의 위쪽 및 아래쪽 테두리 색상을 녹색으로 변경하고 왼쪽 및 오른쪽 테두리 색상을 보라색으로 변경합니다.
document.getElementById("myDiv").style.borderColor = "green purple";
예시
<div> 요소의 테두리 색상을 반환합니다.
alert(document.getElementById("myDiv").style.borderColor);
관련 페이지
CSS 튜토리얼: CSS 테두리
CSS 참조: border-color 속성
HTML DOM 참조: 테두리 속성