Reference/CSS

border-block-start-style 속성은 블록(위쪽) 테두리 스타일 속성을 설정합니다.

by @webs 2022. 12. 29.

border-block-start-style

border는 블록(block)과 인라인(inline)을 구분할 수 있습니다. 블록은 위쪽, 아래쪽으로 말하고, 인라인은 왼쪽, 아래쪽을 의미합니다. 블록은 다시 위쪽(start), 아래쪽(end)으로 분류할 수 있으며, 인라인 역시 왼쪽(start), 오른쪽(end)로 분류 할 수 있습니다. 세부적으로는 두께(width), 스타일(style), 색상(color) 등을 설정할 수 있습니다.

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

정의(Definition)

border-block-start-style 속성은 블록(위쪽) 테두리 스타일 속성을 설정합니다.

비교(Compare)

border-block 속성은 블록(위쪽,아래쪽) 테두리 속성을 일괄적으로 설정합니다.
border-block-color 속성은 블록(위쪽,아래쪽) 테두리 색 속성을 설정합니다.
border-block-style 속성은 블록(위쪽,아래쪽) 테두리 스타일 속성을 설정합니다.
border-block-width 속성은 블록(위쪽,아래쪽) 테두리 두께 속성을 설정합니다.
border-block-start 속성은 블록(위쪽) 테두리 속성을 일괄적으로 설정합니다.
border-block-start-color 속성은 블록(위쪽) 테두리 색 속성을 설정합니다.
border-block-start-style 속성은 블록(위쪽) 테두리 스타일 속성을 설정합니다.
border-block-start-width 속성은 블록(위쪽) 테두리 두께 속성을 설정합니다.
border-block-end 속성은 블록(아래쪽) 테두리 속성을 일괄적으로 설정합니다.
border-block-end-color 속성은 블록(아래쪽) 테두리 색 속성을 설정합니다.
border-block-end-style 속성은 블록(아래쪽) 테두리 스타일 속성을 설정합니다.
border-block-end-width 속성은 블록(아래쪽) 테두리 두께 속성을 설정합니다.

문법(Syntax)

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

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

속성(Property)

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

예제1(Sample)

테두리 블록을 설정한 예제입니다.

horizontal

horizontal vertical

border-block-start-width : 5px 15px 25px thin medium thick

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

border-block-start-color : #4390e1 #f4a2fa rgb(250, 162, 162) rgba(250, 162, 162, 0.4) hsl(246, 90%, 81%) hsl(246, 90%, 81%, 0.4) blue transparent

HTML

CSS

SCRIPT

<div id="border-box" class="horizontal">
    <div class="box">border-block</div>
    <div class="box">border-block</div>
    <div class="box">border-block</div>
</div>

#border-box {
    display: flex;
    justify-content: space-around;
}
#border-box .box {
    width: 30%;
    background-color: #a2cbfa;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    box-sizing: border-box;   
    border-block-start-width: 15px;
    border-block-start-style: solid;
    border-block-start-color: #4390e1;                         
}
#border-box .box:nth-child(1){
    border-radius: 10%;
}
#border-box .box:nth-child(3){
    border-radius: 50%;
}
#border-box.horizontal .box {
    writing-mode: horizontal-tb;
}
#border-box.vertical .box {
    writing-mode: vertical-rl;
    direction: rtl;
}