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

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으로 되돌립니다.

A 오래된 Firefox 버전에는 서브픽셀 반올림 버그가 있어서 4px 미만의 반경에서 곡선이 톱니 모양으로 보였습니다. Chrome은 같은 값을 부드럽게 렌더링합니다. 생성된 코드가 틀린 게 아니라 렌더링 엔진이 다른 겁니다. 최소 6px 반경을 사용하면 차이가 거의 보이지 않습니다. Firefox ESR 102를 지원해야 한다면 `-moz-border-radius`를 추가하세요. 현대 브라우저에서는 표준 속성으로 충분합니다. 저는 클라이언트용 디자인을 납품하기 전에 반드시 두 브라우저에서 확인합니다.

A 전혀 아닙니다. 퍼센트, 픽셀, 연결 해제한 모서리를 조합하면 유기적인 형태를 만들 수 있어요. 100px 요소에서 왼쪽 위를 100%, 오른쪽 위를 20px, 아래 두 개를 0으로 주면 기울어진 방울 모양이 됩니다. 코드를 내보낸 뒤 오목한 곡선이 필요하면 clip-path와 함께 쓰세요. 프리셋 슬라이더부터 만져보는 게 수동 입력보다 훨씬 빠릅니다. 테두리 두께에 따라 곡률이 다르게 보인다는 점도 놓치기 쉬워요.

A 네, 버튼이나 카드에 마우스를 올릴 때 모서리 변화를 애니메이션으로 만들 수 있습니다. 생성된 CSS 코드에 0.3s ease 같은 전환 시간을 추가해 보세요. 사용자가 요소 위에 커서를 올리면 모서리가 부드럽게 변형됩니다. 시작 단위와 끝 단위가 반드시 일치해야 오류가 없습니다. 픽셀에서 퍼센트로 애니메이션을 주면 중간에 어색하게 튀는 현상이 생깁니다.

A 이 생성기 코드는 테두리만 꾸미므로 overflow hidden을 넣지 않으면 이미지가 밖으로 튀어나옵니다. 지난주 실무 프로젝트에서 이 실수를 직접 겪었습니다. CSS 파일의 border-radius 바로 아래에 overflow: hidden을 추가해 보세요. 그러면 이미지가 곡선 라인에 맞춰 깔끔하게 잘려 나갑니다. 사진을 넣고 직접 미리보기로 확인하세요.