Developer Design Utility
Border Radius 생성기
카드, 버튼, 이미지, 모달에 사용할 CSS border-radius 값을 실시간 미리보기로 조절하고, 축약형·개별 속성·inline style 코드를 바로 생성할 수 있습니다.
Radius 설정
전체 모서리를 같은 값으로 조절하거나, 각 모서리를 개별적으로 조절해 원하는 UI 형태를 만들어보세요.
체크를 해제하면 네 모서리 값을 각각 다르게 설정할 수 있습니다.
일반 UI는 px, 원형 이미지나 아바타는 % 값을 추천합니다.
설정한 둥근 모서리 값이 여기에 실시간으로 반영됩니다.
추천 프리셋
자주 사용하는 카드, 버튼, 이미지 형태를 빠르게 적용할 수 있습니다.
기본 UI Radius
버튼 / 이미지 형태
비정형 / 포인트 형태
생성 결과
아래 코드를 CSS 파일, 컴포넌트 스타일 또는 inline style에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Border Radius 생성기는 언제 사용하나요?
카드, 버튼, 이미지, 모달, 입력창처럼 모서리를 둥글게 처리해야 하는 UI 요소를 만들 때 사용합니다. 값을 조절하면서 미리보기를 확인할 수 있어 디자인 작업 속도를 줄일 수 있습니다.
border-radius 값 순서
border-radius 축약형은 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 적용됩니다.
- 첫 번째 값: Top Left
- 두 번째 값: Top Right
- 세 번째 값: Bottom Right
- 네 번째 값: Bottom Left
추천 사용값
- 작은 버튼: 8px ~ 12px
- 일반 카드 UI: 16px ~ 28px
- SaaS형 큰 카드: 24px ~ 36px
- 알약형 버튼: 999px
- 원형 이미지: 50%
px, %, rem 차이
px는 고정된 모서리 크기를 만들 때 적합하고, %는 원형 이미지나 비율 기반 형태를 만들 때 사용합니다. rem은 사이트의 기본 글자 크기에 따라 상대적으로 조절되는 단위입니다.
완전한 원형 이미지를 만들려면 어떻게 해야 하나요?
정사각형 이미지 또는 박스에 border-radius: 50%; 값을 적용하면 원형에 가까운 형태를 만들 수 있습니다.
알약형 버튼은 어떤 값을 사용하나요?
버튼 높이보다 충분히 큰 값인 999px을 사용하면 좌우가 둥근 pill 형태의 버튼을 만들 수 있습니다.
네 모서리 값이 다르면 어떤 효과가 있나요?
대각선 모양, 말풍선형 카드, 비정형 이미지 박스처럼 일반 카드보다 개성 있는 UI 형태를 만들 수 있습니다.