CSS Border Radius 생성기 - 모서리 둥글게 만들기 온라인
비주얼 컨트롤로 CSS border-radius 생성. 둥근 모서리, 알약 형태, 유기적 블롭 디자인 — 바로 사용 가능한 CSS 복사.
자주 묻는 질문
CSS border-radius란 무엇인가요?
CSS border-radius는 요소의 외곽 테두리 모서리를 둥글게 만드는 단축 속성입니다. 단일 반경을 설정하여 원형 모서리를 만들거나, 각 모서리당 두 개의 반경(가로, 세로)을 설정하여 타원형 모서리를 만들 수 있습니다. 둥근 버튼, 카드, 아바타, 알약 형태 요소 등을 만드는 데 가장 많이 사용되는 CSS 속성 중 하나입니다.
이 border-radius 생성기는 어떻게 사용하나요?
기본 모드(4개 모서리 제어) 또는 고급 모드(가로/세로 별도 8값)를 선택하세요. 슬라이더, 숫자 입력, 또는 미리보기 요소의 핸들을 드래그하여 각 모서리의 반경을 조정합니다. 연결 토글을 사용하면 모든 모서리를 동시에 같은 값으로 설정할 수 있습니다. 프리셋 모양에서 시작하여 커스터마이즈할 수도 있습니다. 생성된 CSS 코드를 한 번의 클릭으로 복사하세요.
이 도구는 안전하고 개인정보가 보호되나요?
네. 이 도구는 클라이언트 사이드 JavaScript를 사용하여 100% 브라우저에서 실행됩니다. 어떠한 데이터도 서버로 전송되지 않습니다. 모든 CSS 생성과 미리보기 렌더링이 사용자의 기기에서 로컬로 처리되어 완벽한 프라이버시를 보장합니다.
기본 모드와 고급 모드의 차이점은 무엇인가요?
기본 모드는 각 모서리당 하나의 값(원형 둥글기)을 사용하여 border-radius: 10px 20px 30px 40px 같은 CSS를 생성합니다. 고급 모드는 슬래시 표기법을 사용하여 각 모서리당 두 값(가로/세로 반경)을 설정하여 border-radius: 30% 70% 70% 30% / 70% 30% 30% 70% 같은 CSS를 생성합니다. 슬래시 표기법은 가로와 세로 곡률이 다른 타원형 모서리를 만들어 유기적인 블롭 형태를 가능하게 합니다.
퍼센트와 픽셀 단위 중 언제 어떤 것을 사용해야 하나요?
퍼센트(%)는 요소 크기에 비례하여 border-radius가 확장되기를 원할 때 사용합니다. 예를 들어 border-radius: 50%는 요소 크기에 관계없이 항상 완벽한 원을 만듭니다. 픽셀(px)은 요소 크기에 따라 변하지 않는 고정된 일관적인 곡률을 원할 때 사용합니다. 예를 들어 border-radius: 8px는 다양한 카드 크기에서 일관된 둥근 모서리를 제공합니다.
CSS 단축형 최적화는 어떻게 작동하나요?
이 도구는 자동으로 가장 간결한 유효한 CSS를 생성합니다. 4개 모서리가 모두 같은 경우(예: 10px), 값을 네 번 반복하지 않고 border-radius: 10px로 출력합니다. 대각선 모서리가 일치하면(TL=BR, TR=BL) 2값 단축형을 사용합니다. 이는 CSS 사양의 border-radius 단축형 해석 방식과 일치하여 불필요한 코드를 줄여줍니다.
코드 예제
// CSS Border Radius Generator
function optimizeShorthand(values, unit) {
const [a, b, c, d] = values;
if (a === b && b === c && c === d) return `${a}${unit}`;
if (a === c && b === d) return `${a}${unit} ${b}${unit}`;
if (b === d) return `${a}${unit} ${b}${unit} ${c}${unit}`;
return `${a}${unit} ${b}${unit} ${c}${unit} ${d}${unit}`;
}
function generateBorderRadius(tl, tr, br, bl, unit = 'px') {
return `border-radius: ${optimizeShorthand([tl, tr, br, bl], unit)};`;
}
function generateElliptical(h, v, unit = '%') {
const hPart = optimizeShorthand(h, unit);
const vPart = optimizeShorthand(v, unit);
if (hPart === vPart) return `border-radius: ${hPart};`;
return `border-radius: ${hPart} / ${vPart};`;
}
console.log(generateBorderRadius(10, 20, 10, 20, 'px'));
// border-radius: 10px 20px;
console.log(generateBorderRadius(8, 8, 8, 8, 'px'));
// border-radius: 8px;
console.log(generateElliptical([30, 70, 70, 30], [70, 30, 30, 70], '%'));
// border-radius: 30% 70% / 70% 30%;