CSS Squircle 생성기 - 둥근 사각형
CSS 테두리 반경을 시각적으로 디자인합니다. px 또는 퍼센트 단위의 4개의 독립적인 모서리 슬라이더, 인스턴트 원 및 알약을 위한 모든 모서리 연결 바로가기, 무작위 모양의 유기적 블롭 모드를 제공합니다.
처리 중...
0%
결과
이 페이지에서는 네 모서리가 모두 30%로 연결된 경계 반경 생성기를 엽니다. 즉, 날카로운 정사각형과 완전한 원 사이에 있는 적당한 반올림입니다. 이는 진정한 수학적 곡선(초타원)은 아니지만 단일 CSS 속성이 얻을 수 있는 가장 가까운 속성이며 대부분의 디자인 시스템이 해당 모양을 원할 때 도달하는 값입니다.
이름은 iOS에서 대중화된 둥근 사각형 앱 아이콘에서 유래되었습니다. 각 모서리의 곡선은 부드럽고 친숙한 느낌을 주지만, 모양이 둥글게 느껴질 정도로 너무 크지는 않습니다. 아이콘 타일, 카드 썸네일 및 최신 아바타 프레임은 모두 바로 이러한 이유로 동일한 대략적인 범위의 반경에 의존합니다.
연결된 슬라이더를 위로 살짝 움직여 더 부드럽고 원형 느낌을 주고 아래로 살짝 움직여 더 선명하고 정사각형 느낌을 줍니다. CSS 라인은 변경될 때마다 업데이트되며 곡선이 아이콘이나 카드에 적합하다고 느껴지면 복사할 준비가 됩니다.