border-inline-width 속성은 인라인(왼쪽,오른쪽) 테두리 두께 속성을 설정합니다.

Reference/CSS

border-inline-width 속성은 인라인(왼쪽,오른쪽) 테두리 두께 속성을 일괄적으로 설정합니다.

by @webs 2022. 01. 06.

border-inline-width

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

특징	설명
기본값	border-inline-width : middle
적용	border
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

border-inline-width 속성은 인라인(왼쪽,오른쪽) 테두리 두께 속성을 일괄적으로 설정합니다.

비교(Compare)

border-inline 속성은 인라인(왼쪽,오른쪽) 테두리 속성을 일괄적으로 설정합니다.
border-inline-color 속성은 인라인(왼쪽,오른쪽) 테두리 색 속성을 일괄적으로 설정합니다.
border-inline-style 속성은 인라인(왼쪽,오른쪽) 테두리 스타일 속성을 일괄적으로 설정합니다.
border-inline-width 속성은 인라인(왼쪽,오른쪽) 테두리 두께 속성을 일괄적으로 설정합니다.
border-inline-start 속성은 인라인(왼쪽) 테두리 속성을 일괄적으로 설정합니다.
border-inline-start-color 속성은 인라인(왼쪽) 테두리 색 속성을 설정합니다.
border-inline-start-style 속성은 인라인(왼쪽) 테두리 스타일 속성을 설정합니다.
border-inline-start-width 속성은 인라인(왼쪽) 테두리 두께 속성을 설정합니다.
border-inline-end 속성은 인라인(오른쪽) 테두리 속성을 일괄적으로 설정합니다.
border-inline-end-color 속성은 인라인(오른쪽) 테두리 색 속성을 설정합니다.
border-inline-end-style 속성은 인라인(오른쪽) 테두리 스타일 속성을 설정합니다.
border-inline-end-width 속성은 인라인(오른쪽) 테두리 두께 속성을 설정합니다.

문법(Syntax)

border-inline-width : length | thin | medium | thick

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

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

속성(Property)

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

예제1(Sample)

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

horizontal

horizontal vertical

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

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

border-inline-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-inline</div>
    <div class="box">border-inline</div>
    <div class="box">border-inline</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-inline-width: 15px;
    border-inline-style: solid;
    border-inline-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;
}