CSS 경계 블록 속성

정의 및 사용법

border-block 속성은 다음 속성의 축약입니다:

색상이나 너비의 값이 누락되면 기본 값이 사용됩니다.

CSS border-block 속성은 border 속성은 매우 유사하지만 border-block 속성은 블록 방향에 따라 달라집니다.

주의:관련 CSS 속성에 영향을 미칩니다 writing-mode 블록 방향을 정의합니다. 이는 블록의 시작点和终点位置 및 border-block 속성 결과. 영문 페이지에서는 인라인 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

블록 방향 상단 경계선의 스타일, 색상 및 너비를 다른 요소에 대해 설정합니다:

h1 {
  border-block: 5px solid red;
}
h2 {
  border-block: 4px dotted blue;
}
div {
  border-block: double;
}

블록 방향 상단 경계선의 시작 및 종료 위치는 writing-mode 속성 영향:

div {
  writing-mode: vertical-rl;
  border-block: hotpink dashed 8px;
}

border-block: border-block-width border-block-style border-block-color |initial|inherit;

값	설명
border-block-width	블록 방향 상단 경계선의 너비를 지정합니다. 기본 값은 medium입니다.
border-block-style	블록 방향 상단 경계선의 스타일을 지정합니다. 기본 값은 none입니다.
border-block-color	블록 방향 상단 경계선의 색상을 지정합니다. 기본 값은 텍스트 색상입니다.
initial	이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit	부모 요소에서 이 속성을 상속합니다. 참조: inherit。

기본 값:	medium none color
상속성:	아니요
애니메이션 제작:	지원됩니다. 참조:애니메이션 관련 속성。
버전:	CSS3
JavaScript 문법:	object.style.borderBlock="dashed hotpink 10px"

표中的数字表示首个完全支持该属性的浏览器版本。

크롬	에지	파이어폭스	사파리	오페라
87.0	87.0	66.0	14.1	73.0