동일 값 또는 개별 값 선택
전체 모서리를 같은 값으로 빠르게 조정하거나, 체크를 해제해 네 모서리를 각각 다른 값으로 설정하세요.
개발자 디자인 유틸리티
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 형태를 만들 수 있습니다.
border-radius 값을 모서리 순서와 단위에 맞게 적용하는 법
border-radius는 네 모서리를 둥글게 보이게 하는 CSS 속성이지만 같은 숫자도 요소 크기와 단위에 따라 결과가 달라집니다. 생성된 코드를 적용하기 전에 각 값이 어느 모서리를 뜻하는지, 백분율이 실제 박스 크기에 어떻게 반응하는지 확인해야 합니다.
이런 분께 유용합니다
- 카드와 버튼의 모서리를 조절하는 웹 제작자
- CSS 축약형 순서를 확인하려는 초보 개발자
- 반응형 컴포넌트의 곡률을 비교하는 디자이너
대표 활용 상황
- 네 모서리 값을 빠르게 비교할 때
- 픽셀과 백분율 단위의 차이를 미리 볼 때
- 디자인 시스템에 넣을 border-radius 코드를 만들 때
처음부터 결과 확인까지
- 1
단위가 px인지 %인지 먼저 선택합니다.
- 2
전체 연결을 켜면 한 값으로 네 모서리를 함께 조절하고, 끄면 모서리별 값을 입력합니다.
- 3
미리보기 요소의 크기와 배경색을 실제 컴포넌트와 비슷하게 맞춥니다.
- 4
왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 결과를 확인합니다.
- 5
생성된 CSS를 복사해 대상 선택자에 적용합니다.
- 6
실제 콘텐츠가 들어간 화면과 작은 화면에서 테두리·배경 잘림을 다시 확인합니다.
균일한 카드 모서리
- 입력
- 네 모서리 16px
- 결과
- border-radius: 16px;
카드 전체에 같은 곡률을 적용하는 가장 단순한 형태입니다.
비대칭 말풍선 형태
- 입력
- 24px 24px 4px 24px
- 결과
- 오른쪽 아래만 작은 곡률
축약형 네 값은 왼쪽 위부터 시계 방향으로 대응합니다.
계산·처리 기준
입력한 네 모서리 값을 CSS 축약형 순서로 조합합니다. px는 고정 길이이고 %는 각 모서리의 가로 반지름이 박스 너비, 세로 반지름이 박스 높이를 기준으로 계산되므로 정사각형이 아닌 요소에서는 원과 다른 곡선이 보일 수 있습니다.
알아둘 한계
- 가로·세로 반지름을 슬래시로 구분하는 타원형 고급 문법은 생성하지 않습니다.
- 백분율 결과는 요소의 실제 너비와 높이에 따라 달라집니다.
- 자식 콘텐츠와 이미지의 잘림 여부는 overflow 설정에 따라 달라집니다.
- 디자인 시스템의 토큰 이름이나 브라우저별 시각 차이를 자동으로 검증하지 않습니다.
개인정보 처리
값 계산과 미리보기는 브라우저에서 처리하며 입력한 CSS 값은 서버로 전송하지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- Box Shadow 생성기
카드 외곽의 깊이와 그림자를 함께 조절합니다.
- Glassmorphism 생성기
둥근 모서리와 반투명 배경을 조합합니다.
자주 묻는 질문
50%를 쓰면 항상 원이 되나요?
요소의 너비와 높이가 같을 때는 원에 가깝지만 직사각형에서는 타원 형태가 됩니다.
네 값의 순서는 어떻게 되나요?
왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 시계 방향입니다.
이미지가 모서리 밖으로 보이는 이유는 무엇인가요?
부모의 모서리만 둥글게 하고 overflow를 제한하지 않으면 자식 이미지가 곡선 밖에 보일 수 있습니다.