모서리 반경

클래스

완전히 둥근 모서리에는 반경 토큰이 아니라 고정 pill 유틸리티를 사용합니다. 이 유틸리티는 border-radius: calc(infinity * 1px)만 설정합니다.

값

프리셋 반경 여덟 개는 rem 길이입니다. 픽셀 환산값은 루트 글꼴 크기가 16px라고 가정합니다. 반경은 모서리 모양을 바꾸며 상자의 크기는 설정하지 않습니다.

둥글게 만들기와 잘라 내기는 별개입니다

r-4xl은 부모 요소의 배경과 테두리를 둥글게 만듭니다. 자식에게 같은 반경을 주거나 자식의 그리기 영역을 자동으로 잘라 내지는 않습니다. 부모가 둥근 가장자리에 맞춰 내용을 잘라야 한다면 overflow-hidden을 추가하세요.

두 부모는 r-4xl과 같은 콘텐츠를 사용하며 오른쪽 부모만 overflow-hidden을 추가합니다. 파란색은 자식 표면을 식별하고 점선 윤곽은 부모의 둥근 가장자리를 표시합니다.

텍스트 설명

1. 두 부모 상자는 프리셋 값이 2rem인 r-4xl을 사용합니다. 같은 자식과 부모 콘텐츠 영역을 포함하며 크기는 같은 콘텐츠에 따라 정해집니다.
2. 왼쪽 부모는 기본값인 보이는 오버플로를 유지합니다. 자신의 배경은 둥글지만 파란색 자식은 위쪽에 직사각형으로 그려집니다.
3. 오른쪽 부모는 overflow-hidden을 추가합니다. 같은 자식 직사각형이 부모의 둥근 가장자리에 맞춰 잘리며, 자식이 반경을 상속한 것은 아닙니다.
4. 점선 윤곽은 확인용 주석이며 r-4xl이 출력한 테두리가 아닙니다. 색상은 두 예제에서 같은 자식을 식별하기 위해서만 사용합니다.

rtl- 같은 물리 계열은 항상 왼쪽 위 모서리를 지정합니다. rss- 같은 논리 계열은 block-start와 inline-start를 따르므로 실제 물리적 모서리는 쓰기 모드와 방향에 따라 달라집니다. 모든 대응 관계는 위 표에 나와 있습니다.

인접한 곡선이 겹치면 브라우저는 너무 큰 반경을 줄입니다. 그래서 pill은 가로로 긴 상자에서 캡슐 모양이 되고 정사각형에서는 원이 됩니다. 요소 자체를 정사각형으로 만들지는 않습니다.

직각 모서리에는 값을 직접 받는 r(0) 또는 rtl(0) 같은 개별 모서리 함수를 사용하세요. 프리셋에는 --radius-none 토큰이 없으며 -r-md 같은 음수 토큰 형식은 거부됩니다.

관련 문서: 네이티브 모서리 잘라 내기, 값 직접 지정.

사용 예

바깥 시트에서 안쪽 썸네일로 갈수록 모서리 반경을 작게 지정합니다.

<div class="… r-lg">  <div class="… r-md">FN</div>  <div>    <p>Field notes</p>    <p>Every Friday</p>  </div>  <span class="… pill">Weekly</span></div>

@layer theme {  :root,  :host {    --radius-md: .375rem;    --radius-lg: .5rem  }}@layer utilities {  .r-lg {    border-radius: var(--radius-lg)  }  .r-md {    border-radius: var(--radius-md)  }  .pill {    border-radius: calc(infinity * 1px)  }}

사용자 정의

프리셋 값을 변경하거나 토큰을 추가하세요. --radius-card를 정의하면 r-card와 각 모서리의 클래스가 생성됩니다.

@theme {  --radius-md: .5rem;  --radius-card: 1.25rem;}

@layer theme {  :root,  :host {    --radius-card: 1.25rem  }}@layer utilities {  .r-card {    border-radius: var(--radius-card)  }}

관련 문서: 테마 지시문, 색상.