Reference/CSS

border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.

by @webs 2022. 12. 29.

border-top-color

특징	설명
기본값	border-top-color : currentcolor
적용	border
버전	CSS1
사용성	★★☆☆☆

정의(Definition)

border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.

비교(Compare)

border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.

문법(Syntax)

border-top-color : color

/* 기본 속성 */ 
border-top-color: currentcolor;             /* 기본값 */
border-top-color: #ff0000;                   /* 헥사코드 */
border-top-color: #blue;                     /* 키워드 색상 */
border-top-color: rgb(255, 255, 255);        /* RGB 색상 */
border-top-color: rgba(255, 255, 255, 1);    /* RGBA 색상 */
border-top-color: hsl(120, 100%, 50%);       /* HSL 색상 */
border-top-color: hsla(120, 100%, 50%,1);    /* HSLA 색상 */
border-top-color: transparent;               /* 투명 */

/* 전역 속성 */
border-top-color: inherit;   /* 상속 */
border-top-color: initial;   /* 초기화 */
border-top-color: revert;    /* 원래대로 돌리기 */
border-top-color: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
color	border-top-color: red	테두리 색상을 설정합니다.

예제1(Sample)

테두리 스타일을 설정한 예제입니다.

border: 5px solid #4390e1

border: 10px solid #4390e1

border: 15px solid #4390e1

border: 20px solid #4390e1

border-top-color: currentcolor; border-top-color: transparent; border-top-color: #e19843; border-top-color: #e14355; border-top-color: #6943e1; border-top-color: #43e14d; border-top-color: #4390e1;

dotted dashed solid double groove ridge inset outset

HTML

CSS

SCRIPT

<div class="border-box">
    <div class="box"><span>border: 5px solid #4390e1</span></div>
    <div class="box"><span>border: 10px solid #4390e1</span></div>
    <div class="box"><span>border: 15px solid #4390e1</span></div>
    <div class="box"><span>border: 20px solid #4390e1</span></div>
</div>

#border-box {
    display: flex;
    justify-content: space-between;
}
#border-box .box {
    width: 24%;
    background-color: #a2cbfa;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
#border-box .box:nth-child(1){
    border: 5px solid #4390e1
}
#border-box .box:nth-child(2){
    border: 10px solid #4390e1
}
#border-box .box:nth-child(3){
    border: 15px solid #4390e1
}
#border-box .box:nth-child(4){
    border: 20px solid #4390e1
}
#border-box.dotted > div {border-style: dotted !important;}
#border-box.dashed > div {border-style: dashed !important;}
#border-box.solid > div {border-style: solid !important;}
#border-box.double > div {border-style: double !important;}
#border-box.groove > div {border-style: groove !important;}
#border-box.ridge > div {border-style: ridge !important;}
#border-box.inset > div {border-style: inset !important;}
#border-box.outset > div {border-style: outset !important;}