border-radius
border-radius (테두리 모서리 둥글기)
요소의 테두리 모서리를 얼마나 둥글게 할지 제어하는 유틸리티예요. 옆에서 함께 하나씩 짚어 드릴게요.
출처: 문서
본문
ClassStyles
기본 반지름은 --radius-* 테마 변수로 정의되어 있어요.
| 클래스 | 스타일 |
|---|---|
rounded-xs |
border-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-sm |
border-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-md |
border-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-lg |
border-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-xl |
border-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-2xl |
border-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-3xl |
border-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-4xl |
border-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-none |
border-radius: 0; |
rounded-full |
border-radius: calc(infinity * 1px); |
rounded-(<custom-property>) |
border-radius: var(<custom-property>); |
rounded-[<value>] |
border-radius: <value>; |
한 면(사이드) 단위 — -s-*(inline-start), -e-*(inline-end) 접두사와 함께 각 방향을 지정하는 유틸리티예요.
| 클래스 | 스타일 |
|---|---|
rounded-s-xs |
border-start-start-radius: var(--radius-xs); border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-s-sm |
border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-s-md |
border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-s-lg |
border-start-start-radius: var(--radius-lg); border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-s-xl |
border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-s-2xl |
border-start-start-radius: var(--radius-2xl); border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-s-3xl |
border-start-start-radius: var(--radius-3xl); border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-s-4xl |
border-start-start-radius: var(--radius-4xl); border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-s-none |
border-start-start-radius: 0; border-end-start-radius: 0; |
rounded-s-full |
border-start-start-radius: calc(infinity * 1px); border-end-start-radius: calc(infinity * 1px); |
rounded-s-(<custom-property>) |
border-start-start-radius: var(<custom-property>); border-end-start-radius: var(<custom-property>); |
rounded-s-[<value>] |
border-start-start-radius: <value>; border-end-start-radius: <value>; |
rounded-e-xs |
border-start-end-radius: var(--radius-xs); border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-e-sm |
border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-e-md |
border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-e-lg |
border-start-end-radius: var(--radius-lg); border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-e-xl |
border-start-end-radius: var(--radius-xl); border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-e-2xl |
border-start-end-radius: var(--radius-2xl); border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-e-3xl |
border-start-end-radius: var(--radius-3xl); border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-e-4xl |
border-start-end-radius: var(--radius-4xl); border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-e-none |
border-start-end-radius: 0; border-end-end-radius: 0; |
rounded-e-full |
border-start-end-radius: calc(infinity * 1px); border-end-end-radius: calc(infinity * 1px); |
rounded-e-(<custom-property>) |
border-start-end-radius: var(<custom-property>); border-end-end-radius: var(<custom-property>); |
rounded-e-[<value>] |
border-start-end-radius: <value>; border-end-end-radius: <value>; |
상하좌우(top/right/bottom/left) — -t-*, -r-*, -b-*, -l-* 접두사와 함께 두 모서리를 지정하는 유틸리티예요.
| 클래스 | 스타일 |
|---|---|
rounded-t-xs |
border-top-left-radius: var(--radius-xs); border-top-right-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-t-sm |
border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-t-md |
border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-t-lg |
border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-t-xl |
border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-t-2xl |
border-top-left-radius: var(--radius-2xl); border-top-right-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-t-3xl |
border-top-left-radius: var(--radius-3xl); border-top-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-t-4xl |
border-top-left-radius: var(--radius-4xl); border-top-right-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-t-none |
border-top-left-radius: 0; border-top-right-radius: 0; |
rounded-t-full |
border-top-left-radius: calc(infinity * 1px); border-top-right-radius: calc(infinity * 1px); |
rounded-t-(<custom-property>) |
border-top-left-radius: var(<custom-property>); border-top-right-radius: var(<custom-property>); |
rounded-t-[<value>] |
border-top-left-radius: <value>; border-top-right-radius: <value>; |
rounded-r-xs |
border-top-right-radius: var(--radius-xs); border-bottom-right-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-r-sm |
border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-r-md |
border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-r-lg |
border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-r-xl |
border-top-right-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-r-2xl |
border-top-right-radius: var(--radius-2xl); border-bottom-right-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-r-3xl |
border-top-right-radius: var(--radius-3xl); border-bottom-right-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-r-4xl |
border-top-right-radius: var(--radius-4xl); border-bottom-right-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-r-none |
border-top-right-radius: 0; border-bottom-right-radius: 0; |
rounded-r-full |
border-top-right-radius: calc(infinity * 1px); border-bottom-right-radius: calc(infinity * 1px); |
rounded-r-(<custom-property>) |
border-top-right-radius: var(<custom-property>); border-bottom-right-radius: var(<custom-property>); |
rounded-r-[<value>] |
border-top-right-radius: <value>; border-bottom-right-radius: <value>; |
rounded-b-xs |
border-bottom-right-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-b-sm |
border-bottom-right-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-b-md |
border-bottom-right-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-b-lg |
border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-b-xl |
border-bottom-right-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-b-2xl |
border-bottom-right-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-b-3xl |
border-bottom-right-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-b-4xl |
border-bottom-right-radius: var(--radius-4xl); border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-b-none |
border-bottom-right-radius: 0; border-bottom-left-radius: 0; |
rounded-b-full |
border-bottom-right-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); |
rounded-b-(<custom-property>) |
border-bottom-right-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>); |
rounded-b-[<value>] |
border-bottom-right-radius: <value>; border-bottom-left-radius: <value>; |
rounded-l-xs |
border-top-left-radius: var(--radius-xs); border-bottom-left-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-l-sm |
border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-l-md |
border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-l-lg |
border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-l-xl |
border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-l-2xl |
border-top-left-radius: var(--radius-2xl); border-bottom-left-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-l-3xl |
border-top-left-radius: var(--radius-3xl); border-bottom-left-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-l-4xl |
border-top-left-radius: var(--radius-4xl); border-bottom-left-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-l-none |
border-top-left-radius: 0; border-bottom-left-radius: 0; |
rounded-l-full |
border-top-left-radius: calc(infinity * 1px); border-bottom-left-radius: calc(infinity * 1px); |
rounded-l-(<custom-property>) |
border-top-left-radius: var(<custom-property>); border-bottom-left-radius: var(<custom-property>); |
rounded-l-[<value>] |
border-top-left-radius: <value>; border-bottom-left-radius: <value>; |
개별 모서리(corner) — 두 글자 조합(ss/se/ee/es, tl/tr/br/bl) 접두사와 함께 한 모서리를 지정하는 유틸리티예요.
| 클래스 | 스타일 |
|---|---|
rounded-ss-xs |
border-start-start-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-ss-sm |
border-start-start-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-ss-md |
border-start-start-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-ss-lg |
border-start-start-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-ss-xl |
border-start-start-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-ss-2xl |
border-start-start-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-ss-3xl |
border-start-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-ss-4xl |
border-start-start-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-ss-none |
border-start-start-radius: 0; |
rounded-ss-full |
border-start-start-radius: calc(infinity * 1px); |
rounded-ss-(<custom-property>) |
border-start-start-radius: var(<custom-property>); |
rounded-ss-[<value>] |
border-start-start-radius: <value>; |
rounded-se-xs |
border-start-end-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-se-sm |
border-start-end-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-se-md |
border-start-end-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-se-lg |
border-start-end-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-se-xl |
border-start-end-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-se-2xl |
border-start-end-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-se-3xl |
border-start-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-se-4xl |
border-start-end-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-se-none |
border-start-end-radius: 0; |
rounded-se-full |
border-start-end-radius: calc(infinity * 1px); |
rounded-se-(<custom-property>) |
border-start-end-radius: var(<custom-property>); |
rounded-se-[<value>] |
border-start-end-radius: <value>; |
rounded-ee-xs |
border-end-end-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-ee-sm |
border-end-end-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-ee-md |
border-end-end-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-ee-lg |
border-end-end-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-ee-xl |
border-end-end-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-ee-2xl |
border-end-end-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-ee-3xl |
border-end-end-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-ee-4xl |
border-end-end-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-ee-none |
border-end-end-radius: 0; |
rounded-ee-full |
border-end-end-radius: calc(infinity * 1px); |
rounded-ee-(<custom-property>) |
border-end-end-radius: var(<custom-property>); |
rounded-ee-[<value>] |
border-end-end-radius: <value>; |
rounded-es-xs |
border-end-start-radius: var(--radius-xs); /* 0.125rem (2px) */ |
rounded-es-sm |
border-end-start-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-es-md |
border-end-start-radius: var(--radius-md); /* 0.375rem (6px) */ |
rounded-es-lg |
border-end-start-radius: var(--radius-lg); /* 0.5rem (8px) */ |
rounded-es-xl |
border-end-start-radius: var(--radius-xl); /* 0.75rem (12px) */ |
rounded-es-2xl |
border-end-start-radius: var(--radius-2xl); /* 1rem (16px) */ |
rounded-es-3xl |
border-end-start-radius: var(--radius-3xl); /* 1.5rem (24px) */ |
rounded-es-4xl |
border-end-start-radius: var(--radius-4xl); /* 2rem (32px) */ |
rounded-es-none |
border-end-start-radius: 0; |
rounded-es-full |
border-end-start-radius: calc(infinity * 1px); |
rounded-es-(<custom-property>) |
border-end-start-radius: var(<custom-property>); |
rounded-es-[<value>] |
border-end-start-radius: <value>; |
물리 속성(physical) 모서리 유틸리티도 동일한 패턴으로 제공돼요. 대표 예시는 다음과 같아요.
| 클래스 | 스타일 |
|---|---|
rounded-tl-sm |
border-top-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-tr-sm |
border-top-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-br-sm |
border-bottom-right-radius: var(--radius-sm); /* 0.25rem (4px) */ |
rounded-bl-sm |
border-bottom-left-radius: var(--radius-sm); /* 0.25rem (4px) */ |
각 모서리마다 -xl, -2xl, -3xl, -4xl, -none, -full, -(<custom-property>), -[<value>] 변형이 모두 동일하게 제공돼요.
Examples
Basic example
rounded-sm 이나 rounded-md 같은 유틸리티를 사용해서 요소에 서로 다른 테두리 반지름 크기를 적용할 수 있어요.
<div class="rounded-sm ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-xl ..."></div>
Rounding sides separately
rounded-t-md 나 rounded-r-lg 같은 유틸리티를 사용해서 요소의 한 면만 둥글게 만들 수 있어요.
<div class="rounded-t-lg ..."></div>
<div class="rounded-r-lg ..."></div>
<div class="rounded-b-lg ..."></div>
<div class="rounded-l-lg ..."></div>
Rounding corners separately
rounded-tr-md 나 rounded-tl-lg 같은 유틸리티를 사용해서 요소의 한 모서리만 둥글게 만들 수 있어요.
<div class="rounded-tl-lg ..."></div>
<div class="rounded-tr-lg ..."></div>
<div class="rounded-br-lg ..."></div>
<div class="rounded-bl-lg ..."></div>
Using logical properties
rounded-s-md 나 rounded-se-xl 같은 유틸리티를 사용하면 논리 속성(logical properties)으로 테두리 반지름을 설정할 수 있는데, 텍스트 방향에 따라 적절한 모서리에 매핑돼요.
<div dir="ltr">
<div class="rounded-s-lg ..."></div>
</div>
<div dir="rtl">
<div class="rounded-s-lg ..."></div>
</div>
다음은 논리 속성 반지름 유틸리티와 LTR/RTL 모드에서의 물리 속성 대응 관계예요.
| 클래스 | Left-to-right | Right-to-left |
|---|---|---|
rounded-s-* |
rounded-l-* |
rounded-r-* |
rounded-e-* |
rounded-r-* |
rounded-l-* |
rounded-ss-* |
rounded-tl-* |
rounded-tr-* |
rounded-se-* |
rounded-tr-* |
rounded-tl-* |
rounded-es-* |
rounded-bl-* |
rounded-br-* |
rounded-ee-* |
rounded-br-* |
rounded-bl-* |
더 세밀하게 제어하려면 LTR과 RTL 변형을 사용해서 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수도 있어요.
Creating pill buttons
rounded-full 유틸리티를 사용해서 알약(pill) 모양 버튼을 만들 수 있어요.
<button class="rounded-full ...">Save Changes</button>
Removing the border radius
rounded-none 유틸리티를 사용해서 요소에 적용된 기존 테두리 반지름을 제거할 수 있어요.
<button class="rounded-none ...">Save Changes</button>
Using a custom value
rounded-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 테두리 반지름을 설정할 수 있어요.
<div class="rounded-[2vw] ...">
<!-- ... -->
</div>
CSS 변수라면 rounded-(<custom-property>) 문법을 사용할 수도 있어요.
<div class="rounded-(--my-radius) ...">
<!-- ... -->
</div>
이는 rounded-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.
Responsive design
border-radius 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.
<div class="rounded md:rounded-lg ...">
<!-- ... -->
</div>
변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.
Customizing your theme
--radius-* 테마 변수를 사용해서 프로젝트의 테두리 반지름 유틸리티를 커스터마이즈할 수 있어요.
@theme {
--radius-5xl: 3rem;
}
이제 마크업에서 rounded-5xl 유틸리티를 사용할 수 있어요.
<div class="rounded-5xl">
<!-- ... -->
</div>
테마를 커스터마이즈하는 방법에 대해 더 자세히 알고 싶다면 theme 문서를 참고해 주세요.