CSS border-color 속성

테두리 색 속성은 네 개의 테두리 색을 설정하는 데 사용된다.

색상은 다음과 같이 설정할 수 있다:

이름 - "빨간색"과 같은 색상 이름을 지정합니다
HEX - "#ff0000"과 같은 HEX 값을 지정합니다
RGB - "rgb(255,0,0)"와 같은 RGB 값을 지정합니다
HSL - "hsl(0, 100%, 50%)"과 같은 HSL 값을 지정합니다
투명한

참고: 테두리 색상이 설정되지 않은 경우 요소의 색상을 상속한다.

p.one {
border-style: solid;
border-color: red;
}

위의 코드는 border-style은 solid이고 border-color는 빨간색으로 테두리를 설정한다. 아래 그림과 같다.

CSS border-style solid, border-color red 활용예시

p.two {
border-style: solid;
border-color: green;
}

위의 코드는 border-style은 solid이고 border-color는 초록색으로 테두리를 설정한다. 아래 그림과 같다.

CSS border-style solid, border-color green 활용예시

p.three {
border-style: dotted;
border-color: blue;
}

위의 코드는 border-style은 dotted이고 border-color는 파랑색으로 테두리를 설정한다. 아래 그림과 같다.

CSS border-style dotted, border-color blue 활용예시

CSS 테두리 측면 색상

border-color 속성은 하나에서 네 개의 값(위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리)을 가질 수 있다.

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
</head>
<body>

<h2> border-color 속성</h2>
<p>테두리 색상 속성은 하나에서 네 개의 값(위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리)을 가질 수 있습니다:</p>

<p class="one">다중 색상 테두리 예시</p>

</body>
</html>

CSS 테두리 색상 설정으로 border-color : red, green blue yellow 설정은 위쪽은 빨강색, 오른쪽은 초록색, 아래쪽은 파랑색, 왼쪽은 노랑색을 설정한다.

위의 코드를 실행한 결과 화면은 아래와 같다.

CSS 테두리 HEX 색상(16진수 색상)

테두리 색상은 16진수 값(HEX)을 사용하여 지정할 수도 있다:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

p.two {
  border-style: solid;
  border-color: #0000ff; /* blue */
}

p.three {
  border-style: solid;
  border-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>

<h2>The border-color 속성</h2>
<p>테두리 색상은 16진수 값(HEX)을 사용하여 지정할 수도 있습니다:</p>

<p class="one">빨강색 테두리</p>
<p class="two">파랑색 테두리</p>
<p class="three">초록색 테두리</p>

</body>
</html>

border-color : #ff0000 16진수 값은 빨강색을 의미하며 one 클래스인 p요소는 빨강색 테두리가 설정된다.

border-color : #0000ff 16진수 값은 파랑색을 의미하며 two 클래스인 p요소는 파랑색 테두리가 설정된다.

border-color : #00ff00 16진수 값은 회색을 의미하며 three 클래스인 p요소는 초록색 테두리가 설정된다.

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS 테두리 RGB 색상

rgb()함수를 활용한 css 테두리 색상 설정예시이다.

<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

p.two {
  border-style: solid;
  border-color: rgb(0, 0, 255); /* blue */
}

p.three {
  border-style: solid;
  border-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>

<h2>The border-color 속성</h2>
<p>테두리 색상은 16진수 값(HEX)을 사용하여 지정할 수도 있습니다:</p>

<p class="one">빨강색 테두리</p>
<p class="two">파랑색 테두리</p>
<p class="three">초록색 테두리</p>

</body>
</html>

border-color : rgb(255,0,0) 값은 빨강색을 의미하며 one 클래스인 p요소는 빨강색 테두리가 설정된다.

border-color : rgb(0,0,255) 값은 파랑색을 의미하며 two 클래스인 p요소는 파랑색 테두리가 설정된다.

border-color : rgb(0, 255,0) 값은 회색을 의미하며 three 클래스인 p요소는 초록색 테두리가 설정된다.

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS 테두리 HSL 색상

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

p.two {
  border-style: solid;
  border-color: hsl(240, 100%, 50%); /* blue */
}

p.three {
  border-style: solid;
  border-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>

<h2>The border-color 속성</h2>
<p>테두리 색상은 16진수 값(HEX)을 사용하여 지정할 수도 있습니다:</p>

<p class="one">빨강색 테두리</p>
<p class="two">파랑색 테두리</p>
<p class="three">초록색 테두리</p>

</body>
</html>

border-color : hsl(10, 100%, 50%) 값은 빨강색을 의미하며 one 클래스인 p요소는 빨강색 테두리가 설정된다.

border-color : hsl(240, 100%, 50%) 값은 파랑색을 의미하며 two 클래스인 p요소는 파랑색 테두리가 설정된다.

border-color : hsl(0, 0%, 73%) 값은 회색을 의미하며 three 클래스인 p요소는 초록색 테두리가 설정된다.

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

지금까지 border-color에 색상을 설정하는 것에 대해서 살펴보았다. 색상 이름, 16진수, RGB, HSL 등을 활용하여 색상을 설정하는 것에 대해서 살펴보았다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 테두리 측면 속성 설정 (0)	2023.07.15
CSS 테두리 너비(CSS border-width) (0)	2023.07.14
CSS 테두리(CSS borders) (0)	2023.07.11
CSS background - shorthand 속성 (0)	2023.07.10
CSS background-attacthment (0)	2023.07.09

enjoyCoding

CSS border-color 속성