본문 바로가기
Reference/CSS

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

by @webs 2023. 1. 8.

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

Reference/CSS

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

by @webs 2022. 01. 08.

border-block-start

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

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


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

정의(Definition)

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

비교(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: border-block-start-width | border-block-start-style | border-block-start-color

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

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

/* 스타일 속성 */
border-block-start-style: hidden;
border-block-start-style: solid;  
border-block-start-style: dashed;
border-block-start-style: dotted;
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-color: currentcolor;              /* 기본값 */
border-block-start-color: #ff0000;                   /* 헥사코드 */
border-block-start-color: blue;                      /* 키워드 색상 */
border-block-start-color: rgb(255, 255, 255);        /* RGB 색상 */
border-block-start-color: rgba(255, 255, 255, 1);    /* RGBA 색상 */
border-block-start-color: hsl(120, 100%, 50%);       /* HSL 색상 */
border-block-start-color: hsla(120, 100%, 50%,1);    /* HSLA 색상 */
border-block-start-color: transparent;               /* 투명 */

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

속성(Property)

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

예제1(Sample)

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

horizontal
horizontal
horizontal
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;
}
//javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
border-block-start

보더 블록/인라인과 관련된 속성

  • 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 속성은 블록(아래쪽) 테두리 두께 속성을 설정합니다.
  • 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 속성은 인라인(오른쪽) 테두리 두께 속성을 설정합니다.

보더와 관련된 속성

  • border 속성은 테두리 속성을 일괄적으로 설정합니다.
  • border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
  • border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
  • border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
  • border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.
  • border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
  • border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.
  • border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.
  • border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
  • border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
  • border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.
  • border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.
  • border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.
  • border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
  • border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
  • border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.
  • border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
  • border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
  • border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.
  • border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.
  • border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
  • border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
  • border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
  • border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.
  • border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
  • border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.
  • border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
  • border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
  • border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
  • border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
  • border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.

참고(Reference)


댓글0