CSS 경계선 색상

CSS 경계선 색상

border-color 속성은 네 개의 테두리의 색상을 설정하는 데 사용됩니다.

색상을 설정할 수 있는 방법은 다음과 같습니다:

  • 이름 - 색상 이름을 지정합니다. 예를 들어 "red"
  • HEX - 십육진수 값을 지정합니다. 예를 들어 "#ff0000"
  • RGB - RGB 값을 지정합니다. 예를 들어 "rgb(255,0,0)"
  • HSL - HSL 값을 지정합니다. 예를 들어 "hsl(0, 100%, 50%)"
  • 투명

주석:설정되지 않았다면 border-color그렇지 않으면, 그것은 요소의 색상을 상속받습니다.

예제

다양한 테두리 색상을 보여줍니다:

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

결과:

빨간색 실선 테두리

녹색 실선 테두리

파란색 점 테두리

직접 시도해 보세요

특정 테두리의 색상

border-color 속성은 한 개에서 네 개의 값을 설정할 수 있습니다. (상쪽 테두리, 우쪽 테두리, 하쪽 테두리, 좌쪽 테두리에 사용됩니다).

예제

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 상 red, 우 green, 하 blue, 좌 yellow */
}

직접 시도해 보세요

HEX 값

border의 색상은 16진수 값으로도 지정할 수 있습니다:

예제

p.one {
  border-style: solid;
  border-color: #ff0000; /* 빨간색 */
}

직접 시도해 보세요

RGB 값

또는 RGB 값을 사용할 수 있습니다:

예제

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* 빨간색 */
}

직접 시도해 보세요

HSL 값

또한 HSL 값을 사용할 수 있습니다:

예제

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* 빨간색 */
}

직접 시도해 보세요

우리의 CSS 색상 HEX, RGB, HSL 값에 대한 더 많은 지식을 학습했습니다.