CSS 테두리 반경 생성기 — 무료 온라인 도구

CSS 테두리 반경 생성기이란?

무료 온라인 CSS 테두리 반경 생성기. 시각적 컨트롤로 네 모서리의 둥글기 반경을 조정합니다.

CSS의 border-radius 속성은 요소 모서리의 둥근 정도를 제어하며, 단순한 둥근 사각형을 훨씬 뛰어넘는 다양한 용도로 활용할 수 있습니다. 각 모서리를 개별적으로 조정하면 알약 모양, 원형, 비대칭 모양, 복잡하고 유기적인 형태까지 단 하나의 CSS 속성으로 만들 수 있습니다. CSS Border Radius Generator는 네 모서리를 각각 개별적으로 제어하는 슬라이더를 제공하며, 실시간 미리보기가 즉시 반영됩니다.

좌측 상단, 우측 상단, 우측 하단, 좌측 하단 — 각 모서리마다 자체 슬라이더가 있어 완전히 비대칭적인 모양을 만들 수 있습니다. 픽셀(px)과 퍼센트(%) 단위 전환은 동작을 크게 바꿉니다. 픽셀 값은 요소 크기와 무관하게 동일한 크기를 유지하는 고정 반경의 모서리를 만듭니다. 퍼센트 값은 반경을 요소 크기에 연동시키는데, 이 방식으로 완벽한 원을 만들 수 있습니다(정사각형에 border-radius: 50%).

네 가지 프리셋이 가장 흔한 사용 사례를 다룹니다. Circle은 완벽한 원(정사각형이 아닌 요소에서는 타원)을 위해 border-radius: 50%를 생성합니다. Pill은 양끝이 완전히 둥근 모양(border-radius: 9999px)을 만들며, 버튼 뱃지와 태그에 유용합니다. Card는 카드 컴포넌트와 컨테이너에 적합한 부드러운 8px 라운딩을 적용합니다. Rounded는 버튼과 폼 입력에 적합한 8px 라운딩을 네 모서리에 적용합니다.

생성된 CSS 코드는 단축 문법으로 표시됩니다. 네 모서리 값이 모두 같으면 단일 값(예: border-radius: 8px)을 출력합니다. 모서리가 다르면 시계 방향 순서(좌측 상단, 우측 상단, 우측 하단, 좌측 하단)로 네 값 문법을 출력합니다. 코드는 스타일시트에 바로 복사할 수 있습니다.

CSS 테두리 반경 생성기 실제 사용 사례

알약 모양의 둥근 버튼 만들기

디자인 시스템에서 높이 24px에 양끝이 완전히 둥근 알약 모양 버튼을 사용합니다. "Pill" 프리셋을 선택하면 border-radius: 9999px이 적용됩니다. 버튼 미리보기에 알약 모양이 표시됩니다. CSS를 복사하여 버튼 컴포넌트에 적용하세요. 더 부드러운 느낌을 원하면 각 모서리 값을 개별적으로 조정하세요.

히어로 섹션을 위한 비대칭 모양 설계하기

랜딩 페이지 히어로에 독특한 모양이 필요합니다: 좌측 상단 0px, 우측 상단 40px, 우측 하단 0px, 좌측 하단 40px. 각 모서리 슬라이더를 개별적으로 설정하세요. 미리보기에 독특한 비대칭 모양이 표시됩니다. 생성된 CSS는 border-radius: 0 40px 0 40px입니다.

퍼센트 반경으로 원형 아바타 만들기

사용자 아바타는 64x64 픽셀 정사각형 이미지입니다. 단위를 %로 전환하고 네 모서리를 모두 50%로 설정하세요. 미리보기에 완벽한 원이 표시됩니다. 생성된 CSS는 border-radius: 50%이며, 크기와 무관하게 모든 정사각형 요소에서 작동합니다.

왜 CSS 테두리 반경 생성기을 사용할까?

4개 모서리 개별 제어
px 및 % 단위 전환
실시간 미리보기 상자
4가지 사전 설정: 원형, 알약, 카드, 둥근

CSS 테두리 반경 생성기 사용 방법 — 단계별 가이드

각 모서리의 슬라이더를 조정하세요 (좌상, 우상, 우하, 좌하).

px와 % 단위 사이를 전환하세요.

border-radius를 실시간으로 미리보세요.

CSS 코드를 복사하세요.

CSS 테두리 반경 생성기은 누구에게 적합할까?

UI 디자인
버튼 스타일링
카드 디자인
웹 개발

CSS 테두리 반경 생성기 전문가 팁

1모서리 반경이 일정하게 유지되어야 하는 고정 크기 요소(버튼, 카드)에는 픽셀 값을 사용하세요. 반경이 요소에 따라 확장되어야 하는 반응형 요소에는 퍼센트 값을 사용하세요.
2"Pill" 프리셋은 50% 대신 아주 큰 픽셀 값(9999px)을 사용합니다. 사각형에 50%를 적용하면 알약이 아니라 타원이 만들어지기 때문입니다. 큰 픽셀 값은 모든 사각형 요소에서 양끝이 완전히 둥글게 보장합니다.
3"스퀘클"(iOS에서 많이 쓰이는 모서리가 살짝 둥근 사각형)을 만들려면 모든 모서리에 약 10-12%의 border-radius를 사용하세요. 작은 픽셀 값보다 더 부드러운 느낌을 만듭니다.
4퍼센트 값을 사용할 때 반경은 요소의 너비(좌/우)와 높이(상/하)에 상대적으로 계산됩니다. 가로와 세로 모서리에 다른 퍼센트를 적용하면 타원형 모서리가 만들어집니다.

CSS 테두리 반경 생성기 — 자주 묻는 질문

CSS에서 border-radius란 무엇인가요?

border-radius는 요소의 모서리를 둥글게 만듭니다. 각 모서리에 1-4개의 값을 허용합니다.

CSS로 원을 만드는 방법은?

정사각형 요소(동일한 너비와 높이)에 border-radius: 50%를 설정하세요. 완벽한 원이 만들어집니다.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is CSS 테두리 반경 생성기 really free to use?

Yes, CSS 테두리 반경 생성기 is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

CSS 테두리 반경 생성기을 사용할 준비가 되셨나요?

무료 온라인 도구 — 브라우저에서 작동, 가입 불필요. 지금 바로 시작하세요.

지금 시도하기