CSS 경계 블록 끝 스타일 속성

정의와 사용법

border-block-end-style 속성은 요소가 블록 방향의 끝에 있는 경계 스타일을 설정하는 데 사용됩니다.

CSS border-block-end-style 속성과 border-bottom-style、border-left-style、border-right-style 과 border-top-style }} border-block-end-style 속성은 매우 유사하지만

속성은 블록 방향에 의존합니다.주의하세요: writing-mode 블록 방향을 정의합니다. 이는 블록의 시작 위치와 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. border-block-end-style 속성의 결과는. 영어 페이지에서는 행간 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

예제

예제 1

블록 방향 끝 테두리에 스타일을 설정하려면:

div {
  border-block-end-style: dotted;
}

직접 시도해 보세요

예제 2: writing-mode 속성과 결합

블록 방향 끝 테두리 스타일의 위치는 writing-mode 속성의 영향：

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-width: 5px;
}

직접 시도해 보세요

CSS 문법

border-block-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

속성 값

값 설명
none 기본 값. 테두리가 없음을 지정합니다.
hidden "none"와 같지만 테이블 요소의 테두리 충돌 해결에서 다릅니다.
dotted 점 테두리를 지정합니다.
dashed 점선 테두리를 지정합니다.
solid 단일선 테두리를 지정합니다.
double 양선 테두리를 지정합니다.
groove

3D 파이프 테두리를 지정합니다.

효과는 border-color의 값에 따라 다릅니다.
ridge

3D 블록 단면 테두리를 지정합니다.

효과는 border-color의 값에 따라 다릅니다.
inset

3D 내부 블록 단면 테두리를 지정합니다.

효과는 border-color의 값에 따라 다릅니다.
outset

3D 외부 블록 단면 테두리를 지정합니다.

효과는 border-color의 값에 따라 다릅니다.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참조 inherit。

기술 세부 사항

기본 값： none
상속성： 아니요
애니메이션 제작： no. Read about animatable
버전： CSS3
JavaScript 문법： object.style.borderBlockEndStyle="dotted"

브라우저 지원

표에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
69.0 79.0 41.0 12.1 56.0

관련 페이지

教程：CSS 경계선

참조：CSS 경계 속성

참조：CSS 경계 블록 속성

참조：CSS 경계 블록 스타일 속성

참조：CSS 경계 블록 시작 스타일 속성

참조：CSS 경계 아래 스타일 속성

참조：CSS border-left-style 속성

참조：CSS border-right-style 속성

참조：CSS border-top-style 속성

참조：CSS 쓰러짐 모드 속성