CSS 박스 인라인 끝 속성

정의와 사용법

border-inline-end 속성은 다음 속성의 약자입니다:

• border-inline-end-width（행 내 종료 경계 너비）
• border-inline-end-style（행 내 종료 경계 스타일）
• border-inline-end-color（행 내 종료 경계 색상）

CSS의 border-inline-end 속성은 border-bottom와border-left와border-right 와 border-top 속성은 매우 유사하지만 border-inline-end 속성은 행 내 방향에 따라 의존합니다.

주의:관련 CSS 속성 writing-mode와text-orientation 와 direction 행 내 방향을 정의합니다. 이는 한 행의 시작과 끝 위치, 그리고 border-inline-end 속성 결과. 영어 페이지에서는 행 내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 상단에서 하단으로 진행됩니다.

예제

예제 1

행 내 방향의 끝에서 테두리의 너비, 색상 및 스타일을 설정합니다:

div {
  border-inline-end: 10px solid pink;
}

본인이 직접 시도해 보세요

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

행 내 방향의 끝에서 테두리 위치는 writing-mode 속성 영향:

div {
  writing-mode: vertical-rl;
  border-inline-end: 5px solid blue;
}

본인이 직접 시도해 보세요

예제 3: direction 속성과 결합

행 내 방향의 끝에서 테두리 위치는 direction 속성 영향:

div {
  direction: rtl;
  border-inline-end: 5px solid hotpink;
}

본인이 직접 시도해 보세요

CSS 문법

border-inline-end: border-inline-end-width border-inline-end-style border-inline-end-color|initial|inherit;

속성 값

기술 세부 사항

기술 세부 사항

브라우저 지원

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

관련 페이지

교육:CSS 경계선

참조:CSS 박스 경계 속성

참조:CSS 박스 인라인 속성

참조:CSS 박스 인라인 끝 스타일 속성

참조:CSS 박스 인라인 끝 색상 속성

참조:CSS 박스 하단 경계 색상 속성

참조:CSS border-left-color 속성

참조:CSS border-right-color 속성

참조:CSS border-top-color 속성

참조:CSS 방향 속성

참조:CSS 텍스트-오리엔테이션 속성

참조:CSS 쓰기 모드 속성