이 도구에 대해
둥근 모서리는 인터페이스의 분위기를 결정하며, border-radius는 하나의 균일한 값보다 훨씬 많은 일을 할 수 있습니다. 이 생성기는 각 모서리를 개별적으로 둥글게 하고, 8값 가로/세로 문법을 전부 활용해 평범한 사각형과는 전혀 다른 부드럽고 유기적인 “블롭” 모양을 만들 수 있게 합니다.
슬라이더를 드래그해 모양이 실시간으로 갱신되는 것을 보고 border-radius CSS를 복사하세요. 모든 것이 브라우저에서 실행됩니다.
자주 묻는 질문
연결(linked) 모드와 모서리별 모드의 차이는 무엇인가요?
연결 모드는 네 모서리 모두에 동일한 픽셀 반경을 적용합니다. 체크를 해제하면 모서리별 모드로 전환되어 각 모서리마다 독립적인 가로/세로 퍼센트를 설정할 수 있습니다.
타원형(원형이 아닌) 모서리를 만들 수 있나요?
네. 모서리별 모드로 전환한 뒤 가로와 세로 퍼센트를 다르게 설정하세요 — CSS border-radius는 모서리마다 두 개의 반경을 지원하며, 이 도구는 둘 다 조절할 수 있게 해줍니다.
완벽한 원이나 알약 모양은 어떻게 만드나요?
원을 만들려면 균일 반경을 요소 너비/높이의 50%로 설정하세요(또는 모서리별 모드에서 50%/50%로 설정). 알약 모양을 만들려면 반경을 요소 높이의 절반 이상으로 설정하세요.
제 디자인이 어딘가에 업로드되나요?
아니요. 미리보기 박스와 생성된 CSS는 오직 브라우저 내에서 로컬로 계산됩니다.
왜 CSS 출력에 슬래시(/)가 들어갈 때가 있나요?
슬래시는 가로와 세로 반경을 구분합니다 (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — 이는 모서리별 모드에서만 나타나며, 연결 모드는 값이 하나만 필요하기 때문입니다.