CSS Border Radius 생성기 무료 온라인: 둥근 모서리 시각적 생성

A border-radius: 50%로 정사각형이 완벽한 원으로.

A 네, 각 모서리 개별 값 설정 가능.

A '연결 해제' 버튼을 클릭하면 개별 모서리 컨트롤이 분리됩니다. 이는 다른 모서리에 영향을 주지 않고 하나의 모서리 반경을 조정할 수 있음을 의미합니다. 네 개의 입력 필드가 독립적으로 변하는 것을 볼 수 있습니다. 비대칭 디자인을 만들 때 유용합니다.

A 네, 생성기에서 픽셀과 백분율 사이를 전환할 수 있습니다. 백분율은 요소의 크기에 상대적이며, 반지름 자체가 아닙니다. 200px 너비 상자에 50% 값을 설정하면 모서리에 100px 반지름이 생성됩니다. 이는 요소 크기가 변하는 반응형 레이아웃에서 특히 중요합니다. 디자인이 다양한 화면에서 유연하게 확장되어야 할 때는 백분율을 사용해 보세요.

A 픽셀 값을 사용하면 화면 크기에 관계없이 반경이 고정됩니다. 휴대폰에서는 40px 반경이 데스크톱보다 거대해 보입니다. 백분율 값으로 전환하세요. 요소 크기에 맞게 조정됩니다. 예를 들어 10%는 버튼 너비가 150px이든 300px이든 비율을 유지합니다. 먼저 생성기의 반응형 미리보기에서 디자인을 테스트하세요.

A 이 생성기는 표준 CSS 속성을 출력합니다. `--radius: 20px` 같은 커스텀 속성은 생성하지 않습니다. 스타일시트에서 출력 코드를 `var()` 호출로 감싸야 합니다. 코드를 붙여넣고 값을 `var(--my-radius)`로 바꾸세요. 시각적 조정을 위한 도구이므로, CSS 변수가 필요하면 직접 값을 옮기세요. 약 30초면 됩니다.

A 최신 브라우저에서 둥근 모서리는 GPU 가속을 사용하므로 복잡한 그림자나 그라데이션보다 렌더링이 빠릅니다. 하지만 오래된 폰에 border-radius를 50개 이상 쌓으면 배터리가 빨리 닳습니다. 프리랜서 개발자들이 페이지 하나에 50개 이상의 둥근 카드를 넣는 경우가 있는데, 그때부터 렉이 느껴집니다. 저가형 Android 기기에서는 요소를 30개 미만, 반경 20px 이하로 유지하세요. 2019년형 Moto G로 테스트하는 게 안전합니다.

A 아니요, 키보드 단축키는 없습니다. 초기화 버튼을 클릭하거나 각 모서리를 수동으로 0으로 설정해야 해요. 프리랜서 개발자들이 초기화하려던 모서리를 10분 동안 조정하는 걸 여러 번 봤습니다 — 오른쪽 상단의 초기화 아이콘을 클릭하면 모든 입력 필드가 즉시 지워집니다.

A 요소가 완벽한 정사각형이고 모서리를 모두 50%로 설정한 경우에만 가능합니다. 200x200px 상자에서 border-radius: 50%는 진짜 원을 만듭니다. 하지만 300x200px 직사각형에서는 50%가 타원이 됩니다 — 가로와 세로 반지름이 다르기 때문입니다. 이 생성기는 실시간으로 보여주므로 직사각형 상자에서 모서리 슬라이더를 드래그해 보세요. 네 모서리가 모두 50%에 도달하면 알약 모양으로 변하는 것을 볼 수 있습니다. 이는 버그가 아니라 CSS 수학이 작동하는 방식입니다.

A 바로 그게 링크 해제 버튼의 용도입니다. 클릭해서 네 모서리를 분리한 다음, 왼쪽 위와 오른쪽 아래만 원하는 반지름으로 설정하고 나머지 둘은 0으로 유지하세요. 120px 너비 버튼에서 잎사귀 효과를 내려면 대각선 모서리에 60px를 시도해 보세요. 부드러운 물방울 윤곽이 나옵니다. 미리보기가 즉시 업데이트되므로 슬라이더를 움직여 형태가 자연스러워질 때까지 조정하세요. 길을 잃으면 재설정 아이콘이 모든 것을 0으로 되돌립니다.