CSS 경계 끝 시작 둥근 경계 속성

정의와 사용법

border-end-start-radius 속성은 요소 블록 방향 끝(끝 block-end)과 행 내 방향 시작 부분(시작 inline-start) 사이의 모서리 반지름을 정의합니다.

주의:관련 CSS 속성 writing-mode、text-orientation 와 direction 블록 방향과 행 내 방향을 정의합니다. 이것이 이 속성들이 영향을 미치는 이유입니다. border-end-start-radius 속성 결과. 영어 페이지에서는 행 내 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

만약 border-end-start-radius 속성이 두 가지 값이 있으면, 모서리는 타원형이 됩니다：

border-end-start-radius: 50px 100px;

만약 border-end-start-radius 속성이 값이 하나 있으면, 모서리는 원형이 됩니다：

border-end-start-radius: 50px;

CSS border-end-start-radius 속성과 border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius 와 border-top-right-radius 속성은 매우 유사하지만 border-end-start-radius 속성은 블록 방향과 행 내 방향에 의존합니다.

예제

예제 1

일부 요소의 블록 방향의 끝과 행 내 방향의 시작에서의 원형 모서리를 추가합니다:

#example1 {
  background-color: lightblue;
  border-end-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  writing-mode: vertical-rl;
}

직접 시도해 보세요

예제 2: direction 속성과 결합

블록 방향의 끝과 행 내 방향의 시작에서의 원형 모서리 위치는 direction 속성의 영향:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-start-radius: 25px;
}

직접 시도해 보세요

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

블록 방향의 끝과 행 내 방향의 시작에서의 원형 모서리 위치는 writing-mode 속성의 영향:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-start-radius: 25px;
}

직접 시도해 보세요

CSS 문법

border-end-start-radius: 0|length|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

교재:CSS 라운드-커너

참조:CSS 경계 아래 왼쪽 둥근 경계 속성

참조:CSS 경계 아래 오른쪽 둥근 경계 속성

참조:CSS border-top-left-radius 속성

참조:CSS border-top-right-radius 속성

참조:CSS 방향 속성

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

참조:CSS 쓰러잉-모드 속성