CSS 경계 인라인 속성

정의와 사용법

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

• border-inline-width
• border-inline-style（필수）
• border-inline-color

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

CSS의 border-inline 속성과 border 속성이 매우 유사하지만 border-inline 속성은 행 내 방향에 따라 달라집니다.

주의:와 관련된 CSS 속성 writing-mode및text-orientation 와 direction 행 내 방향을 정의합니다. 이는 한 줄의 시작과 종료 위치, 그리고 border-inline 속성의 효과. 영어 페이지에서는 행 내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

예제

예제 1

행 내 방향 상의 다른 요소에 경계선의 스타일, 색상 및 너비를 설정합니다:

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

직접 테스트해 보세요

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

행 내 방향 상의 시작 및 종료 위치의 경계선은 writing-mode 속성의 영향:

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

직접 테스트해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

강의:CSS 경계선

참조:CSS 경계 속성

참조:CSS 경계 인라인 색상 속성

참조:CSS border-inline-style 속성

참조:CSS border-inline-width 속성

참조:CSS 방향 속성

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

참조:CSS 라이팅-모드 속성