border-color
border-color 속성은 테두리 색 속성을 설정합니다.
border-color
border-color 속성은 테두리 색 속성을 설정합니다.
정의(Definition)
- border-color는 테두리 색 속성을 설정합니다.
비교(Compare)
- border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
- border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
- border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
- border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
테두리와 관련된 속성(Border Related Properties)
- border-width는 테두리 두께 속성을 설정합니다.
- border-style는 테두리 스타일 속성을 설정합니다.
- border-color는 테두리 색 속성을 설정합니다.
- border-image는 테두리 이미지 속성을 설정합니다.
- border-radius는 모서리 굴곡을 설정합니다.
- outline는 아웃라인의 속성을 설정합니다.
- box-shadow은 요소의 그림자를 설정합니다.
문법(Syntax)
border-color : color | transparent
/* 기본 색상값을 설정한 경우 */
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 | 테두리 색을 투명하게 설정합니다. |
예제1(Sample)
border-color 속성을 설정하는 예제입니다.
<div class="border-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.border-box {
display: flex;
}
.border-box > div {
flex: 1 1 20%;
border-radius: 3px;
background-color: #a2cbfa;
border-color: #4390e1;
border-width: 10px;
border-style: solid;
box-sizing: border-box;
box-shadow: 0 2px 2px rgb(0 90 250 / 5%), 0 4px 4px rgb(0 90 250 / 5%), 0 8px 8px rgb(0 90 250 / 5%), 0 16px 16px rgb(0 90 250 / 5%);
color: #fff;
padding: 10px;
margin: 1%;
min-height: 100px;
}
//Javascript none
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-color | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
border-top-color | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
border-right-color | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
border-bottom-color | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
border-left-color | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |