Developer Design Utility
Border Radius 생성기
각 모서리의 radius 값을 조절해 카드, 버튼, 이미지 박스에 사용할 CSS border-radius 코드를 실시간으로 만들 수 있습니다.
모서리 개별 조절
좌상단, 우상단, 우하단, 좌하단 값을 각각 설정
실시간 미리보기
카드 형태에 border-radius 값을 즉시 반영
CSS 코드 복사
생성된 border-radius 코드를 바로 복사·저장
Radius 설정
전체 모서리 또는 각 모서리 값을 개별적으로 조절하세요.
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
0px
24px
120px
일반 UI는 px, 원형 이미지는 % 값을 추천합니다.
추천 프리셋
Preview
Border Radius
Preview Card
설정한 둥근 모서리 값이 여기에 반영됩니다.
Top
24px / 24px
Bottom
24px / 24px
Unit
px
생성 결과
아래 코드를 CSS 파일 또는 style 속성에 사용할 수 있습니다.
설정을 선택한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
도움말
Border Radius는 어디에 사용하나요?
카드, 버튼, 이미지, 모달, 입력창의 모서리를 둥글게 처리할 때 사용합니다. 둥근 모서리는 UI를 부드럽고 현대적인 느낌으로 만드는 데 도움이 됩니다.
값의 의미
- Top Left: 왼쪽 위 모서리
- Top Right: 오른쪽 위 모서리
- Bottom Right: 오른쪽 아래 모서리
- Bottom Left: 왼쪽 아래 모서리
팁
일반 카드 UI에는 16px~28px 정도가 자연스럽습니다. 프로필 이미지나 원형 버튼은 50% 값을 사용하면 원형에 가까운 형태를 만들 수 있습니다.