Border Radius 생성기
CSS border-radius를 시각적으로 디자인하세요. px 또는 % 단위의 독립적인 네 모서리 슬라이더, 빠른 원형 및 알약형 생성을 위한 모든 모서리 연결 바로가기, 그리고 무작위적인 형태의 유기적 블롭 모드까지 제공합니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
border-radius 선언은 최대 네 개의 독립적인 모서리 값과 유기적인 곡선을 위한 선택적 8값 슬래시 구문을 취할 수 있습니다. 단순한 둥근 카드 이상이 필요해질 때까지 대부분의 사람들이 생각하는 것보다 훨씬 많은 조정 부분이 있는 것이죠. 이 생성기는 그 모든 부분을 화면에 보여줍니다. 각각 px 또는 % 단위를 선택할 수 있는 네 개의 모서리 슬라이더, 대칭적인 형태를 위한 모든 모서리 연결 바로가기, 그리고 단일 반경 값으로는 표현할 수 없는 형태를 위한 블롭 모드까지요.
모서리 모드는 사람들이 실제로 원하는 형태를 다룹니다. 모든 모서리를 하나의 슬라이더에 연결하여 완벽한 원, 알약, 스퀘어클을 만들거나, 연결을 해제하여 드롭다운 패널의 상단만, 또는 카드의 한쪽 면만 둥글게 처리할 수 있습니다. 밝은 배경과 어두운 배경으로 전환 가능한 체커보드 미리보기는 특정 반경에서 어떤 모서리가 잘려 나가는지 명확하게 보여줍니다. 이 사이트의 파일 도구들이 투명도를 표시할 때 사용하는 것과 동일한 시각적 기법입니다.
블롭 모드가 나머지 절반입니다. CSS 8값 슬래시 구문을 사용하면 각 모서리의 수평 및 수직 반경을 서로 다르게 설정할 수 있으며, 이것이 둥근 사각형을 유기적이고 불규칙한 윤곽으로 바꿉니다. 언제든 무작위 생성 버튼을 눌러 새로운 형태를 얻고 그 이면의 정확한 CSS를 복사하세요. SVG 내보내기나 외부 라이브러리가 필요하지 않습니다. 프리셋 페이지는 사람들이 실제로 검색창에 입력하는 요청들을 다룹니다. 완벽한 원, 경기장 모양의 알약 버튼, iOS 스타일 스퀘어클, 그리고 바로 사용할 수 있는 유기적 블롭이죠.
이 사이트의 모든 도구와 마찬가지로, 완전히 브라우저 내에서 실행됩니다. 업로드도, 계정도 필요 없으며, 페이지가 로드된 후에는 생성기가 오프라인에서도 계속 작동합니다.