CSS border-radius 생성기

언제 사용하나요?

버튼, 카드, 이미지 등 UI 요소의 모서리 둥글기를 조정할 때 미리보기로 확인하며 CSS 값을 생성합니다.

사용 방법

• 각 모서리의 radius 값을 슬라이더로 조정합니다.
• 미리보기에서 모서리 형태를 실시간으로 확인합니다.
• 생성된 border-radius CSS를 복사합니다.

입력값 안내

좌상, 우상, 우하, 좌하 4개 모서리의 둥글기 값(px 또는 %)을 슬라이더로 각각 조절합니다.

계산·변환 기준

각 코너의 설정값을 수집하여 `border-radius: [Top-Left] [Top-Right] [Bottom-Right] [Bottom-Left]` 구문으로 CSS 문자열을 생성하고, DOM 요소의 인라인 스타일로 즉시 적용해 시각적 피드백을 제공합니다.

사용 예시

• 컴포넌트 모서리 조정 - 버튼, 카드, 이미지의 radius 값을 빠르게 확인합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• 모든 모서리 50% 설정 → border-radius: 50% 50% 50% 50% (완전한 원형 생성)
• 왼쪽 위 모서리만 24px → 한쪽만 둥근 말풍선 모양 생성

주의사항

• 생성된 border-radius CSS는 참고용입니다. 부모 요소 크기에 따라 시각적 결과가 달라 보일 수 있으니 실제 레이아웃에서 확인하세요.
• 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

Border Radius 구성

네 모서리를 개별 지정할 때는 top-left top-right bottom-right bottom-left 순서입니다. 값 하나만 쓰면 네 모서리 모두 같은 값이 적용됩니다.

비대칭 둥근 모서리

각 모서리를 다르게 설정하면 방울, 리본, 유기적 도형 등 다양한 모양을 만들 수 있습니다. 4코너 링크 해제 버튼을 눌러 각각 독립적으로 조절하세요.

자주 묻는 질문

단위는 무엇인가요?

px 단위 border-radius 값을 생성합니다.

결과를 미리 볼 수 있나요?

네. 값을 조절하면 미리보기 상자의 모서리 모양이 즉시 바뀝니다.

아주 둥근 모서리나 원형도 만들 수 있나요?

네 모서리에 큰 값을 주면 알약 모양이, 정사각형 요소에 충분히 큰 값을 주면 원에 가까운 모양이 됩니다.

모서리마다 다르게 줄 수 있나요?

네 모서리 값을 각각 조절할 수 있어 한쪽만 둥근 말풍선 같은 모양도 만들 수 있습니다.

관련 도구

• CSS box-shadow 생성기 - 슬라이더로 그림자 값을 조정하고 box-shadow CSS를 생성합니다.
• CSS gradient 생성기 - 색상과 각도를 조정해 linear-gradient CSS를 생성합니다.
• Flexbox 생성기 - flex-direction, justify-content, align-items, gap 값을 조정해 Flexbox CSS를 생성합니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.