borderColor 속성이란?
borderColor 속성은 HTML 요소의 테두리(border) 색상을 설정하거나 현재 값을 가져올 때 사용하는 DOM 스타일 속성입니다. 이 속성을 활용하면 테두리의 네 변(위·오른쪽·아래·왼쪽)에 서로 다른 색상을 각각 지정할 수 있어, 보다 유연한 디자인 구현이 가능합니다.
문법(Syntax)
borderColor 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.borderColor = "color|transparent|initial|inherit";
속성 값(Value)
borderColor 속성에 사용할 수 있는 값은 아래와 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | color 테두리 색상을 지정합니다. 색상 이름, HEX 코드, RGB 값 등을 사용할 수 있습니다. |
| 2 | transparent 테두리를 투명하게 만들어, 테두리 아래에 있는 콘텐츠가 비치도록 합니다. |
| 3 | initial 해당 속성을 브라우저의 기본값(initial value)으로 되돌립니다. |
| 4 | inherit 부모 요소의 borderColor 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 버튼을 클릭하면 div 요소의 테두리 색상 순서를 반전시키는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:100px;
height:100px;
border:solid 10px;
border-color: limegreen crimson;
top: 10px;
}
</style>
<script>
function changeBorderColor(){
document.getElementById("DIV1").style.borderColor="crimson limegreen";
document.getElementById("Sample").innerHTML="테두리 색상이 반전되었습니다.";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>아래 버튼을 클릭하면 위 div의 테두리 색상이 반전됩니다.</p>
<button onclick="changeBorderColor()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>코드 설명
- CSS에서
#DIV1요소에border-color: limegreen crimson;을 적용하여 가로변(limegreen)과 세로변(crimson)의 색상을 다르게 지정했습니다. - 버튼을 클릭하면
changeBorderColor()함수가 실행되어 두 색상의 순서를 서로 바꿉니다. - 동시에
<p id="Sample">영역에 변경 완료 메시지가 출력됩니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
Change Border Color 버튼을 클릭하면 테두리 색상이 아래와 같이 반전됩니다.
