Border Radius

​Basic usage

​둥근 모서리

rounded-sm, rounded, rounded-lg와 같은 유틸리티를 사용해 엘리먼트에 다양한 크기의 둥근 모서리를 적용할 수 있습니다.

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

​Pill buttons

rounded-full 유틸리티를 사용해 둥근 모서리의 버튼을 만들 수 있습니다.

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

​둥근 모서리 없애기

rounded-none을 사용하면 엘리먼트에 적용된 둥근 모서리를 제거할 수 있습니다.

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

이 기능은 주로 더 작은 브레이크포인트에서 적용된 둥근 모서리를 제거할 때 사용됩니다.

​각 면을 따로 둥글게 만들기

rounded-t-*, rounded-r-*, rounded-b-*, rounded-l-* 유틸리티를 사용해 엘리먼트의 한 면만 둥글게 만들 수 있습니다.

<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-tl-*, rounded-tr-*, rounded-br-*, rounded-bl-* 유틸리티를 사용해 엘리먼트의 특정 모서리만 둥글게 만들 수 있습니다.

<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-*, rounded-e-*, rounded-ss-*, rounded-se-*, rounded-es-*, rounded-ee-* 유틸리티를 사용하세요. 이 유틸리티들은 텍스트 방향에 따라 적절한 모서리에 매핑됩니다.

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

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

다음은 사용 가능한 모든 테두리 색상 논리적 속성 유틸리티와 LTR 및 RTL 모드에서의 물리적 속성 대응표입니다.

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

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:rounded-lg 를 사용하면 rounded-lg 유틸리티를 hover 상태에서만 적용할 수 있습니다.

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

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:rounded-lg를 사용하면 중간 화면 크기 이상에서만 rounded-lg 유틸리티를 적용할 수 있습니다.

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

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.

​Using custom values

​테마 커스터마이징

기본적으로 Tailwind는 다섯 가지 테두리 반지름 크기 유틸리티를 제공합니다. Tailwind 설정 파일의 theme.borderRadius 섹션을 수정하여 이를 변경하거나 추가, 삭제할 수 있습니다.

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '0.125rem',
      DEFAULT: '0.25rem',
      DEFAULT: '4px',
      'md': '0.375rem',
      'lg': '0.5rem',
      'full': '9999px',
      'large': '12px',
    }
  }
}

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

​임의 값

테마에 포함시키기 어려운 border-radius 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.

<div class="rounded-[12px]">
  <!-- ... -->
</div>

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.