Reference/CSS

border-block 속성은 블록(위쪽,아래쪽) 테두리 속성을 일괄적으로 설정합니다.

by @webs 2022. 12. 29.

border-block

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

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

정의(Definition)

border-block 속성은 블록(위쪽,아래쪽) 테두리 속성을 일괄적으로 설정합니다.

비교(Compare)

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

문법(Syntax)

border-block: border-block-width | border-block-style | border-block-color

/* 기본 속성 */ 
border-block: 1px;                  /* 두께 */
border-block: 2px dotted;           /* 두께 | 스타일 */
border-block: medium dashed blue;   /* 두께 | 스타일 | 색상 */

/* 두께 속성 */
border-block-width: 15px;
border-block-width: thin;
border-block-width: medium; 
border-block-width: thick; 

/* 스타일 속성 */
border-block-style: hidden;
border-block-style: solid;  
border-block-style: dashed;
border-block-style: dotted;
border-block-style: double;
border-block-style: groove;
border-block-style: ridge;
border-block-style: inset;
border-block-style: outset;

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

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

속성(Property)

속성값	값(예)	설명
border-block-width	border-block-width : 1px	블록(위쪽,아래쪽) 테두리 두께 속성을 설정합니다.
border-block-style	border-block-style : solid	블록(위쪽,아래쪽) 테두리 스타일 속성을 설정합니다.
border-block-color	border-block-color : blue	블록(위쪽,아래쪽) 테두리 색 속성을 설정합니다.

예제1(Sample)

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

horizontal

horizontal vertical

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

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

border-block-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-width: 15px;
    border-block-style: solid;
    border-block-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;
}