CSS Border Radius 생성기
실시간 미리보기로 CSS border-radius를 시각적으로 만들고 바로 사용 가능한 코드를 복사하세요.
미리보기
모서리 핸들을 드래그하세요
CSS
border-radius: —;
100% 비공개 — 모든 작업이 브라우저에서 실행됩니다. 아무것도 업로드되지 않습니다.
모서리
모든 모서리
px
px
요소
프리셋
CSS Border Radius 생성기 소개
CSS 모서리 반경 생성기는 부드럽게 둥근 카드부터 유기적인 방울 모양까지 모두 만들어 냅니다. 미리보기에서 모서리 핸들을 직접 드래그하거나, 각 모서리에 가로/세로 반경을 각각 지정하는 여덟 값 문법까지 포함해 숫자로 설정할 수 있습니다. 이 두 번째 축이야말로 달걀, 잎, 물방울, 방울 모양을 가능하게 하는 열쇠입니다.
모서리 연결 토글을 켜면 네 모서리가 함께 움직여 전통적인 균일한 둥글림을 만들 수 있고, 연결을 해제하면 각 모서리를 자유롭게 조정해 비대칭 모양을 만들 수 있습니다. rounded, pill, circle, squircle, blob 두 종류, leaf, egg, arch, teardrop, petal, wave까지 열두 가지 프리셋이 이 속성의 가능성을 보여 주며, 무작위 생성 버튼은 신선한 유기적 모양을 끝없이 만들어 냅니다.
단위를 바꾸고, 디자인에 맞춰 요소와 캔버스의 색을 다시 칠하며, border-radius 값만 복사하거나 완전한 CSS 규칙을 복사할 수 있습니다. 이 도구는 100% 클라이언트 측에서 동작하므로 아무것도 업로드되지 않습니다.
CSS Border Radius 생성기 사용 방법
- 미리보기에서 모서리 핸들을 드래그하거나, “모든 모서리 연결”을 꺼서 각 모서리를 따로 편집합니다.
- 유기적인 방울 모양을 위해 각 모서리마다 가로와 세로 반경을 설정합니다.
- 단위를 선택하고, 맥락 속에서 미리보려면 요소와 배경 색상을 조정합니다.
- pill, squircle, blob, leaf, teardrop 등의 프리셋을 시도하거나 무작위 생성을 눌러 봅니다.
- border-radius 값이나 전체 CSS를 복사합니다.
자주 묻는 질문
슬래시 앞의 값은 네 모서리의 가로 반경이고, 뒤의 값은 세로 반경입니다. 모서리마다 이 두 축을 다르게 설정하면 평범한 둥근 상자가 달걀, 잎, 방울 모양으로 바뀝니다.
원을 만들려면 정사각형 요소에 border-radius: 50%를 적용하세요. 알약 모양을 만들려면 직사각형에 높이의 절반 이상인 반경을 주면 됩니다. circle과 pill 프리셋을 쓰면 둘 다 즉시 설정됩니다.
네. border-radius는 배경 이미지를 포함해 요소의 박스 자체를 잘라 내고, overflow: hidden을 추가하면 자식 콘텐츠까지 잘림 범위가 확장됩니다. img 요소에 방울 모양 반경을 적용하면 유기적인 사진 마스크를 빠르게 얻을 수 있습니다.
네, 두 상태의 값 단위가 호환된다면 border-radius는 CSS 트랜지션으로 부드럽게 보간됩니다. 호버 시 두 방울 값 사이를 애니메이션하는 것은 인기 있는 유기적 모핑 효과입니다. 이 도구에서 두 상태를 만들고 그 사이를 전환해 보세요.
네, 완전히 무료이며 사생활 보호도 확실합니다. 계정 없이, 어디로도 데이터를 보내지 않고 오직 브라우저 안에서만 실행됩니다.
인기 검색어
css border radius 생성기
border radius 생성기
팬시 border radius 생성기
css 둥근 모서리 생성기
border radius css 온라인 도구
타원형 border radius 생성기
css 방울 모양 생성기
border radius 미리보기 도구
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.