[CSS] 요소의 테두리 색상 {border-color:}

border-color 속성은 요소의 테두리 색상을 지정하는 데 사용됩니다.

요소 테두리의 네 면 모두 또는 각 면에 대해 개별적으로 색상을 설정할 수 있습니다.

 

 

다음은 border-color 속성을 사용하는 방법의 예입니다.

div {
  border-color: red;
}

이 예제에서 border-color 속성은 <div> 요소에 적용되며 red 값은 테두리의 4면 모두의 색상을 빨간색으로 설정합니다.

즉, <div> 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리가 모두 빨간색이 됩니다.

 

 

속기 표기법을 사용하여 각 측면에 대해 서로 다른 테두리 색상을 지정할 수도 있습니다.

div {
  border-color: red green blue yellow;
}

이 경우 'red'(위), 'green'(오른쪽), 'blue'(아래), 'yellow'(왼쪽) 값이 위에서부터 시계 방향으로 적용됩니다. 이렇게 하면 <div> 요소의 각 측면에 대해 서로 다른 테두리 색상이 설정됩니다.

 

 

또는 각 측면에 대해 개별적으로 테두리 색상을 설정할 수 있습니다.

div {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

이 예에서 <div> 요소 테두리의 각 면에는 다른 색상이 지정됩니다.

 

 

border-color 속성은 색상 이름(예: red, blue)외에도 16진수 코드(예: #ff0000, #00ff00), RGB 값(예: rgb(255, 0, 0), rgb(0, 255, 0)) 또는 HSL 값(예: hsl(0, 100%, 50%), hsl(120, 100%, 50 %)) 를 넣어서 사용 할 수도 있습니다.

 

 

각 측면에 개별적으로 다른 테두리 색상을 지정하려면 border-top-color, border-right-color, border-bottom-color 및 border-left-color 속성을 사용할 수 있습니다. 

 

 

border-color 속성을 사용하면 요소 테두리의 색상을 제어할 수 있으므로 모양을 사용자 지정하고 웹 페이지의 요소 또는 섹션 간에 시각적 구분을 만들 수 있습니다.