본문으로 건너뛰기

테두리

모서리 반경과 테두리 두께. 나열이 아니라 실제 쓰는 단계만 큐레이션: Tailwind 유틸을 그대로 쓴다.

모서리 반경 · radius

rounded-sm
4px

뱃지·태그·인풋 내부 등 작은 요소.

rounded-md
6px

기본값: 버튼·인풋·작은 카드.

rounded-lg
8px

카드·드롭다운·패널.

rounded-xl
12px

큰 컨테이너·모달·미리보기 박스.

rounded-full
9999px

원형·pill: 아바타·점·토글.

기본은 rounded-md. 한 컴포넌트 안에서는 한 단계만: 카드(xl) 안의 버튼(md)처럼 위계에 맞춰 한 칸씩 줄인다.

테두리 두께 · width

border-0
0px

테두리 제거.

border
1px

기본: 구분선·카드·인풋 외곽선.

border-2
2px

강조·선택·포커스 상태.

색은 border-border(기본)·border-border-strong(강조)를 쓴다: 색상 파운데이션 참고.