Reference/CSS

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

by @webs 2022. 12. 29.

border-style

테두리 종류를 여러가지 스타일로 설정 가능합니다. 네 면의 위치를 일괄적으로 설정할 수 있으며, 각각의 위치를 개별적으로도 설정이 가능합니다. 스타일을 설정하기 위해서는 border-width와 border-color가 설정되어 있어야 합니다.

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

정의(Definition)

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

비교(Compare)

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

문법(Syntax)

/* 기본 속성 */ 
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-style: dotted solid; 

/* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-style: dotted solid ridge; 

/* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
border-style: dotted solid ridge dashed; 

/* 전역 속성 */
border-style: inherit;   /* 상속 */
border-style: initial;   /* 초기화 */
border-style: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
none	border-style: none	테두리 스타일을 설정하지 않습니다.
hidden	border-style: hidden	테두리 스타일을 숨김으로 설정합니다.
dotted	border-style: dotted	테두리 스타일을 dotted(점선)으로 설정합니다.
dashed	border-style: dashed	테두리 스타일을 dashed(긴 점선)으로 설정합니다.
solid	border-style: solid	테두리 스타일을 solid(실선)으로 설정합니다.
double	border-style: double	테두리 스타일을 double(이중선)으로 설정합니다.
groove	border-style: groove	테두리 스타일을 groove(움푹 들어간 입체적인 선)로 설정합니다.
ridge	border-style: ridge	테두리 스타일을 ridge(앞으로 튀어나온 입체적인 선)로 설정합니다.
inset	border-style: inset	테두리 스타일을 inset(박스 전체가 움푹 들어간 입체적인 선)로 설정합니다.
outset	border-style: outset	테두리 스타일을 outset(박스 전체가 앞으로 튀어나온 입체적인 선)로 설정합니다.

예제1(Sample)

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

border: 4px solid #4390e1

border: 10px solid #4390e1

border: 15px solid #4390e1

border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset;

border-style: ridge double; border-style: ridge double outset; border-style: solid dashed dotted 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%;
    }
}