border-radius

예제

기본 예제

rounded-sm과 rounded-md 같은 유틸리티를 사용해 엘리먼트에 다양한 테두리 반경 크기를 적용할 수 있습니다.

<div class="rounded-sm ..."></div><div class="rounded-md ..."></div><div class="rounded-lg ..."></div><div class="rounded-xl ..."></div>

각 면을 따로 둥글게 만들기

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>

각 모서리 따로 둥글게 만들기

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>

논리적 속성 사용하기

논리적 속성을 사용하여 테두리 반경을 설정하려면 rounded-s-md 및 rounded-se-xl과 같은 유틸리티를 사용하세요. 이 유틸리티들은 텍스트 방향에 따라 적절한 모서리에 매핑됩니다.

<div dir="ltr">  <div class="rounded-s-lg ..."></div></div><div dir="rtl">  <div class="rounded-s-lg ..."></div></div>

다음은 LTR 및 RTL 모드에서 사용 가능한 모든 테두리 반경 논리적 속성 유틸리티와 그에 상응하는 물리적 속성입니다.

더 세밀한 제어를 위해 LTR 및 RTL 수정자를 사용하여 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수도 있습니다.

알약 모양 버튼 만들기

rounded-full 유틸리티를 사용해 알약 모양 버튼을 만들 수 있습니다.

<button class="rounded-full ...">Save Changes</button>

테두리 둥글기 제거하기

엘리먼트의 기존 테두리 둥글기를 제거하려면 rounded-none 유틸리티를 사용하세요:

<button class="rounded-none ...">Save Changes</button>

커스텀 값 사용하기

rounded-[<value>] 구문을 사용하세요 border radius를 완전히 커스텀한 값으로 설정하려면:

<div class="rounded-[2vw] ...">  <!-- ... --></div>

CSS 변수를 사용하려면 rounded-(<custom-property>) 구문을 사용할 수도 있습니다:

<div class="rounded-(--my-radius) ...">  <!-- ... --></div>

이는 rounded-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.

반응형 디자인

접두사 a border-radius 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

<div class="rounded md:rounded-lg ...">  <!-- ... --></div>

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.

테마 커스터마이징

--radius-* 테마 변수를 사용해 프로젝트에서 border radius 유틸리티를 커스터마이징할 수 있습니다:

@theme {  --radius-5xl: 3rem; }

이제 rounded-5xl 유틸리티를 마크업에서 사용할 수 있습니다:

<div class="rounded-5xl">  <!-- ... --></div>

테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.