CSS border-radius 생성기 — 시각적
네 모서리 슬라이더(px 또는 %, 타원 모서리 지원)로 CSS border-radius를 시각적으로 만드세요. 실시간 미리보기와 복사 가능한 코드. 브라우저에서.
🔒 모두 브라우저 안에서 동작합니다. 입력과 출력은 서버로 전송되거나 저장되지 않아 안전합니다.
이 도구 소개
이 border-radius 생성기를 사용하면 상자의 모서리를 시각적으로 둥글리고 정확한 CSS를 복사할 수 있습니다. 네 모서리를 슬라이더로 한꺼번에 움직이거나 하나씩 따로 다듬을 수 있고, 픽셀과 백분율을 전환하며, 가로와 세로 값을 따로 지정하는 타원형 모서리까지 설정할 수 있습니다. 작업하는 대로 실시간 미리보기가 갱신되고, 그 아래에 붙여 넣기만 하면 되는 border-radius 규칙이 나타납니다. 값을 손으로 적지 않고도 버튼·카드·아바타를 빠르게 디자인할 수 있으며 모든 작업이 브라우저에서 이루어집니다.
자주 묻는 질문
픽셀 단위 모서리와 백분율 단위 모서리는 어떻게 다른가요?
픽셀 단위 모서리는 상자가 아무리 커도 같은 크기를 유지하는 고정된 곡선이라 여러 요소에서 모서리를 일관되게 맞추기 좋습니다. 백분율 단위 모서리는 상자 자체의 너비와 높이에 대한 상대값이라 요소가 커지면 함께 커집니다. 대표적인 기법이 border-radius: 50%로, 정사각형을 완벽한 원으로, 어떤 직사각형이든 타원으로 바꿔 줍니다 — 둥근 아바타와 알약 모양 버튼에 안성맞춤입니다.
타원형 모서리와 CSS에 나오는 슬래시(/)는 무엇인가요?
타원형 모서리는 가로와 세로 두 개의 서로 다른 반지름을 사용하므로 곡선이 높이보다 넓거나 그 반대가 될 수 있습니다. CSS에서는 이 쌍을 슬래시로 구분해 border-radius: 40px / 20px처럼 쓰며, 슬래시 앞의 값이 가로 반지름을, 뒤의 값이 세로 반지름을 정합니다. 하나의 반지름으로는 만들 수 없는 부드럽고 늘어나거나 비대칭인 형태를 만들 수 있고, 생성기가 그 구문을 대신 작성해 줍니다.
생성된 CSS를 그대로 프로젝트에 붙여 넣을 수 있나요?
네. 이 도구는 표준 border-radius 선언을 출력하므로 스타일시트에 바로 붙여 넣을 수 있고, 이 속성은 모든 최신 브라우저에서 지원됩니다. 드래그하는 동안 모든 것이 브라우저에서 로컬로 계산되므로 디자인한 내용이 업로드되지 않으며, 미리보기와 생성된 코드 모두 전적으로 여러분의 기기에서 만들어집니다. 규칙을 복사해 CSS에 넣고, 필요하면 나중에 숫자를 조정하세요.