코드랩 레퍼런스

border-color 본문

CSS

border-color

webstoryboy 2016. 6. 14. 00:54
border-color는 테두리 색 속성을 설정합니다.
특징 설명
기본 값 current color
상속 안됨
애니메이션 가능
버전 CSS1

Definition

  • border-color는 테두리 색 속성을 설정합니다.
  • border-top-color는 위쪽 테두리 색 속성을 설정합니다.
  • border-right-color는 오른쪽 테두리 색 속성을 설정합니다.
  • border-bottom-color는 아래쪽 테두리 색 속성을 설정합니다.
  • border-left-color는 왼쪽 테두리 색 속성을 설정합니다.

Syntax

border-color : color | transparent | inherit;
/* 기본 색상값을 설정한 경우 */
border-color: #ff0000;

/* 기본 색상값(키워드)을 설정한 경우 */
border-color: blue;

/* 기본 색상값(RGB)을 설정한 경우 */
border-color: rgb(255, 255, 255);

/* 기본 색상값(RGBA)을 설정한 경우 */
border-color: rgba(255, 255, 255, 0.4);

/* 기본 색상값(hsl)을 설정한 경우 */
border-color: hsl(120,100%,50%);

/* 기본 색상값(hsla)을 설정한 경우 */
border-color: hsla(120,100%,50%, 0.4);

/* transparent을 설정한 경우 */
border-color : transparent;

/* inherit을 설정한 경우 */
border-color : inherit;

/* 기본 색상값 표현 방법(위/오른쪽/아래/왼쪽) */
border-color : red yellow blue black;

/* 기본 색상값 표현 방법(위/오른쪽,왼쪽/아래) */
border-color : red yellow blue;

/* 기본 색상값 표현 방법(위,아래/오른쪽,왼쪽) */
border-color : red yellow;

/* 기본 색상값 표현 방법(위,오른쪽,아래,왼쪽) */
border-color : red;

Property

속성 값 설명
color 테두리 색을 설정합니다.
transparent 테두리 색을 투명하게 설정합니다.
inherit 테두리 색을 부모 요소로부터 상속받습니다.

Compatibility

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 안드로이드 아이콘 ios 아이콘 익스플로러6 아이콘 6 익스플로러7 아이콘 7 익스플로러8 아이콘 8 익스플로러9 아이콘 9 익스플로러10 아이콘 10 익스플로러11 아이콘 11 엣지 아이콘
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

Sample

border-color











Ad

Comments