동일 값 또는 개별 값 선택
전체 모서리를 같은 값으로 빠르게 조정하거나, 체크를 해제해 네 모서리를 각각 다른 값으로 설정하세요.
개발자 디자인 유틸리티
Border Radius 생성기
카드, 버튼, 이미지, 모달에 사용할 CSS border-radius 값을 실시간 미리보기로 조절하고, 축약형·개별 속성·inline style 코드를 바로 생성할 수 있습니다.
모서리 개별 조절
좌상단, 우상단, 우하단, 좌하단 값을 각각 설정할 수 있습니다.
실시간 미리보기
설정한 radius 값이 Preview Card에 즉시 반영됩니다.
CSS 코드 생성
축약형, 개별 속성, inline style 예시까지 함께 확인할 수 있습니다.
현재 단위
px
모서리 조합
동일 값
상단 Radius
24px / 24px
하단 Radius
24px / 24px
Radius 설정
전체 모서리를 같은 값으로 조절하거나, 각 모서리를 개별적으로 조절해 원하는 UI 형태를 만들어보세요.
체크를 해제하면 네 모서리 값을 각각 다르게 설정할 수 있습니다.
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
일반 UI는 px, 원형 이미지나 아바타는 % 값을 추천합니다.
Live Preview
Border Radius
Preview Card
설정한 둥근 모서리 값이 여기에 실시간으로 반영됩니다.
Top
24px / 24px
Bottom
24px / 24px
Unit
px
추천 프리셋
자주 사용하는 카드, 버튼, 이미지 형태를 빠르게 적용할 수 있습니다.
기본 UI Radius
버튼 / 이미지 형태
비정형 / 포인트 형태
생성 결과
아래 코드를 CSS 파일, 컴포넌트 스타일 또는 inline style에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
사용 방법
Radius 값 조정
슬라이더로 값을 바꾸고 px, %, rem 단위를 선택하세요. 카드, pill 버튼, 원형 이미지, 비대칭 형태 프리셋도 사용할 수 있습니다.
실시간 미리보기 확인
Preview Card에 모서리 값이 바로 반영되므로 UI에 어울리는 둥근 정도를 눈으로 확인할 수 있습니다.
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 형태를 만들 수 있습니다.