CSS 둥근 모서리 생성기

CSS 둥근 모서리 생성기란?

CSS 둥근 모서리 생성기는 CSS border-radius 속성을 시각적으로 편집하는 무료 도구로, 프런트엔드 개발자와 디자이너를 위해 만들어졌습니다. 범위 슬라이더와 숫자 입력으로 각 모서리의 가로·세로 반경을 픽셀로 설정하고 단위를 고르며, 타원 모드를 켜면 타원형 모서리의 슬래시 문법을 얻습니다. 미리보기 박스가 둥근 모양을 실시간으로 보여 주고, 간결한 단축 선언이 생성되어 복사할 수 있습니다. 분절 컨트롤에서 둥근/알약/원/유기적인 블롭 같은 프리셋을 골라 빠르게 시작한 뒤 원하는 모서리를 미세 조정하세요. 값 순서를 외우지 않고도 부드러운 카드, 알약 버튼, 완전한 원, 스퀘어클, 블롭 형태의 장식 모양을 만들 수 있습니다.

CSS 둥근 모서리 생성기 사용법

1. 분절 컨트롤에서 프리셋(둥근·알약·원·블롭)을 골라 시작 모양을 불러옵니다.
2. 각 모서리의 범위 슬라이더를 끌거나 숫자를 입력해 해당 모서리의 가로 반경을 설정합니다.
3. ‘타원’을 켜면 모서리마다 두 번째 세로 반경이 나타나 슬래시 문법으로 타원형 모서리를 만듭니다.
4. 설정에서 단위(px 또는 %)를 고릅니다. 퍼센트는 박스 크기에 맞춰 반경이 비례합니다.
5. 라이브 미리보기가 갱신되는 것을 확인한 뒤 생성된 border-radius 단축 CSS를 스타일시트에 복사합니다.

예시

네 모서리 모두 16, 타원 끔

border-radius: 16px;

프리셋 알약, 모든 모서리 9999

border-radius: 9999px;

좌상 40/20, 우상 10, 우하 40/20, 좌하 10, 타원 켬

border-radius: 40px 10px 40px 10px / 20px 10px 20px 10px;

자주 묻는 질문

네 모서리의 순서는 어떻게 되나요?

단축 표기는 왼쪽 위부터 시계 방향으로 모서리를 나열합니다: 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래. 이 도구는 항상 이 순서로 네 값을 출력하므로 결과가 명확하고 이후 직접 손보기도 쉽습니다.

타원 모드는 무엇을 하나요?

border-radius는 모서리마다 슬래시로 구분한 가로 반경과 세로 반경을 받아 원형이 아닌 타원형 모서리를 그릴 수 있습니다. ‘타원’을 켜면 각 모서리에 두 번째 세로 반경을 설정할 수 있고, 출력은 ‘가로 / 세로’ 슬래시 문법을 사용합니다.

px와 퍼센트 중 무엇을 써야 하나요?

픽셀은 박스와 무관하게 고정된 모서리 크기를 줍니다. 퍼센트는 박스의 너비·높이에 상대적이므로 모든 모서리에 50%를 주면 정사각형이 완전한 원이 되고 요소 크기가 변하면 둥글기도 함께 비례합니다. 단위는 설정에서 바꿉니다.

완전한 원이나 알약은 어떻게 만드나요?

정사각형을 원으로 만들려면 ‘원’ 프리셋(모든 모서리 50%)을, 짧은 변을 완전한 반원으로 만들려면 ‘알약’ 프리셋(아주 큰 픽셀 반경)을 고르세요. 프리셋에서 시작해 개별 모서리를 미세 조정할 수도 있습니다.

제 데이터가 어딘가로 업로드되나요?

아니요. 이 생성기는 전부 JavaScript로 브라우저 안에서 실행됩니다 — 반경 값이 서버로 전송되지 않으므로 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.