⬭ CSS 테두리 반지름 생성기

소개

이 CSS 테두리 반지름 생성기는 세 가지 편집 모드를 제공합니다. 단순 모드는 네 모서리를 한꺼번에 조절하고, 모서리별 모드는 각 모서리를 독립적으로 조정하며, 타원형 모드는 CSS border-radius 단축 문법의 가로·세로 반지름을 모서리마다 별도 설정할 수 있습니다. 실시간 SVG 다이어그램으로 모든 변화를 바로 확인할 수 있고, 블롭 랜덤화 버튼은 암호학적 난수로 모던 UI에서 유행하는 유기적 블롭 형태를 즉시 만들어 줍니다. 모든 처리가 브라우저 내에서 완결되므로 디자인 정보가 외부로 나가지 않으며, 인터넷 없이도 사용할 수 있습니다.

사용 방법

1. 컨트롤 패널 상단의 버튼으로 단순(전체 모서리), 모서리별, 타원형(x/y 개별 반지름) 모드 중 하나를 선택하세요.
2. 슬라이더를 드래그하거나 숫자 입력란에 직접 값을 입력해 각 모서리의 반지름을 설정하세요. 미리보기와 SVG 다이어그램이 즉시 업데이트됩니다.
3. 블롭 랜덤화 버튼을 클릭하면 타원형 반지름을 무작위 조합해 유기적인 블롭 형태를 만듭니다. 장식용 UI 요소나 히어로 배경에 활용하기 좋습니다.
4. 출력 박스에서 생성된 CSS 단축 문법을 확인하세요. 동일한 값은 자동으로 최단 구문으로 줄여서 표시됩니다.
5. CSS 복사 버튼을 클릭해 클립보드에 복사한 뒤 스타일시트나 디자인 도구에 바로 붙여넣으세요.

자주 묻는 질문

이 CSS 테두리 반지름 생성기는 완전히 무료인가요?

네, 계정 가입도, 구독도, 숨겨진 제한도 없이 완전 무료입니다. 페이지를 열자마자 바로 사용할 수 있습니다.

인터넷 없이 오프라인에서도 사용할 수 있나요?

네. 모든 처리가 브라우저 내에서 이루어지며 서버 통신이 전혀 없습니다. 페이지가 로드된 후에는 인터넷을 끊어도 계속 사용할 수 있으며, 마지막 설정도 브라우저에 자동 저장됩니다.

제 디자인 데이터는 안전하게 보호되나요?

완전히 안전합니다. 어떤 데이터도 브라우저 밖으로 나가지 않으며, 업로드도, 입력값 분석도, 서버 저장도 없습니다. 모든 것이 내 기기 안에서만 처리됩니다.

타원형 모드는 무엇인가요?

타원형 모드는 네 모서리 각각에 가로(x)·세로(y) 반지름을 독립적으로 지정할 수 있으며, 슬래시 표기법을 사용하는 CSS border-radius 전체 구문을 생성합니다. 단순 모드나 모서리별 모드로는 만들 수 없는 비대칭·달걀형 형태를 구현할 때 유용합니다.

블롭 랜덤화 버튼은 어떤 용도인가요?

블롭 랜덤화는 암호학적 난수를 사용해 여덟 개 모서리-축 조합에 무작위 타원 반지름을 부여, 유기적이고 불규칙한 형태를 생성합니다. 모던 랜딩 페이지, 아바타, 장식 배경에 자주 쓰이는 유동적인 블롭 모양을 클릭 한 번으로 만들 수 있습니다.