둥근 모서리·도형 생성기
네 모서리의 가로·세로 반지름을 px 또는 %로 조정하고 형태를 미리 볼 수 있습니다. 생성한 border-radius CSS를 복사·저장할 수 있습니다. 미리보기의 너비·높이·색은 CSS에 포함되지 않습니다.
할 수 있는 일
템플릿에서 둥글기 조정
모서리 둥글기, 캡슐, 잎 등 8가지 템플릿을 선택하고 반지름을 조정할 수 있습니다. 템플릿을 선택하면 반지름과 단위가 대체됩니다.
네 모서리를 각각 다른 둥글기로
같은 반지름 지정을 해제하면 왼쪽 위·오른쪽 위·오른쪽 아래·왼쪽 아래의 가로 반지름과 세로 반지름을 개별로 입력할 수 있습니다.
CSS를 확인하고 받기
모양을 확인한 뒤 CSS를 생성합니다. 축약형과 모서리별 지정을 전환하고 복사하거나 CSS 파일로 저장할 수 있습니다.
사용 방법
템플릿과 단위 선택
그대로 반지름을 입력하거나 템플릿을 선택해 조정을 시작합니다. 단위를 바꿔도 숫자는 변환되지 않습니다.
둥글기와 모양 비교
같은 반지름을 쓰려면 값을 하나 입력합니다. 모서리마다 바꾸려면 선택을 해제하고 가로·세로 값을 조정하세요.
필요하면 크기 확인
미리보기 설정에서 너비와 높이, 확인용 색을 바꿀 수 있습니다. 이들은 출력하는 CSS에 포함되지 않습니다.
CSS 생성 후 복사·저장
“CSS 생성”을 누르고 사용할 형식을 선택합니다. 반지름이나 단위, 크기를 바꾼 경우에는 다시 생성하세요.
이럴 때 편리
카드와 버튼의 모서리 다듬기
네 모서리를 같은 둥글기로 하거나 위쪽만 둥글게 해서 페이지 부품에 쓸 CSS를 만들고 싶을 때.
비대칭 둥근 배경 만들기
모서리마다 가로세로 둥글기를 바꿔 잎이나 유기적인 모양에 가까운 윤곽을 만들고 싶을 때.
반지름·단위·표시 크기의 관계
가로와 세로는 같은 모서리의 두 방향
가로 반지름은 가로 방향, 세로 반지름은 세로 방향의 둥글기입니다. 둘 중 하나가 0이면 그 모서리는 둥글어지지 않습니다. 네 모서리는 왼쪽 위부터 시계 방향으로 지정합니다.
%는 너비와 높이를 각각의 기준으로
가로 %는 요소의 너비, 세로 %는 높이를 기준으로 합니다. 같은 숫자라도 정사각형과 세로로 긴·가로로 긴 사각형에서는 보이는 모습이 달라집니다. px는 길이를 직접 지정합니다.
너무 큰 반지름은 같은 비율로 줄어듦
이웃한 반지름의 합이 변의 길이를 넘으면 표시에 사용하는 8개의 반지름이 공통 비율로 축소됩니다. 입력값과 생성하는 CSS는 그대로입니다. 생성 후 세부에서 미리보기에 사용되는 반지름을 확인할 수 있습니다.
모서리 둥글기로 표현할 수 있는 윤곽의 범위
border-radius는 모서리를 타원 곡선으로 만드는 지정입니다. 오목한 모양이나 임의의 다각형은 만들 수 없습니다. 스퀘어클 템플릿은 타원 모서리로 근사한 것이며 수학적 곡선의 완전한 재현은 아닙니다.
자주 묻는 질문
모서리마다 다른 둥글기를 설정할 수 있나요?
예. “모든 모서리에 같은 반지름 사용”을 해제하면 각 모서리의 가로 반지름·세로 반지름을 따로 입력할 수 있습니다. 다시 선택하면 왼쪽 위 가로 반지름으로 모두 통일됩니다.
단위를 바꾸면 숫자도 변환되나요?
아니요. 숫자는 유지하고 단위만 바꿉니다. px에서 %로 바꿨을 때 100을 넘는 값이 남아 있으면 0~100 범위로 다시 입력하세요.
미리보기의 크기와 색도 CSS에 포함되나요?
포함되지 않습니다. 출력은 border-radius 지정뿐입니다. 너비·높이·배경색은 사용할 페이지나 부품 쪽에서 지정하세요.
표시되는 모양이 입력한 반지름보다 작게 둥글어지는 이유는 무엇인가요?
모서리 곡선이 겹치지 않도록 브라우저가 표시용 반지름을 같은 비율로 줄이기 때문입니다. “표시에 사용되는 반지름”에서 축소율과 각 모서리의 px 값을 확인할 수 있습니다.
입력과 결과
- 반지름
- 전체 8개 값을 같은 단위로 지정. 0~100% 또는 0~9999px. 소수도 입력할 수 있습니다.
- 확인용
- 미리보기의 너비·높이는 1~400px의 정수. 다 표시되지 않는 너비는 칸 안에서 가로 스크롤.
- 출력
- border-radius 축약형 또는 네 모서리별 지정. 복사·border-radius.css 저장.
- 포함하지 않는 것
- 너비·높이·배경색, 이미지나 SVG 내보내기.