Reference/CSS

border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.

by @webs 2022. 12. 29.

border-width

특징	설명
기본값	border-width : medium
적용	border
버전	CSS1
사용성	★★☆☆☆

정의(Definition)

border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.

비교(Compare)

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

문법(Syntax)

border-width : length | thin | medium | thick

/* 기본 속성 */ 
border-width: 10px;
border-width: thin;
border-width: medium;
border-width: thick;

/* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-width: 5px 15px; 

/* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-width: 3px medium thick;

/* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
border-width: 0.5em thick 0.2rem 3px;

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

속성(Property)

속성값	값(예)	설명
length	border-width: 10px	CSS 단위를 설정합니다.
thin	border-width: thin	테두리 굵기를 thin(1px)으로 설정합니다.
medium	border-width: medium	테두리 굵기를 medium(3px)으로 설정합니다.
thick	border-width: thick	테두리 굵기를 thick(5px)으로 설정합니다.

예제1(Sample)

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

border: 1px solid #4390e1

border-width: thin; border-width: medium; border-width: thick; border-width: 1px; border-width: 5px; border-width: 10px; border-width: 1em; border-width: 1em 15px; border-width: 25px 15px 1rem; border-width: 1rem 15px medium thick;

dotted dashed solid double groove ridge inset outset

HTML

CSS

SCRIPT

<div class="border-box">
    <div class="box"><span>border: 4px 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>

.border-box {
    display: flex;
    justify-content: space-between;
}
.border-box .box {
    width: 32%;
    background-color: #a2cbfa;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    box-sizing: border-box;
}
.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
}

@media (max-width: 800px){
    .border-box {
        flex-direction: column;
    }
    .border-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}