본문으로 건너뛰기
SPCX Tools

Border Radius

CSS 둥근 모서리와 도형을 시각적으로 디자인하고 클릭 한 번으로 코드를 복사하세요.

로컬 실행 — 파일이 기기 외부로 전송되지 않습니다

도구 불러오는 중…

Border Radius 사용 방법

  1. 1원하는 단위를 선택하세요 (고정된 곡선은 "px", 반응형 도형은 "%" 사용).
  2. 2"모서리 연결" 체크박스를 선택해 모든 모서리를 한 번에 조절하거나, 체크를 해제해 각 모서리 값을 개별적으로 설정하세요.
  3. 3슬라이더를 드래그하여 테두리 둥글기를 조절하고 실시간으로 업데이트되는 미리보기 도형을 확인하세요.
  4. 4또는 프리셋 버튼을 클릭하여 알약, 원형, 탭, 나뭇잎 등 자주 쓰이는 도형을 즉시 만들 수 있습니다.
  5. 5하단에 생성된 CSS 코드를 복사하여 스타일시트에 적용하세요.

시각적인 border-radius 생성기

웹 컴포넌트에 딱 맞는 둥근 모서리를 만들기 위해 숫자를 어림짐작하며 브라우저를 계속 새로고침할 필요가 없습니다. 이 시각적인 border-radius 생성기를 사용하면 슬라이더를 조절하여 모서리의 곡률이 요소에 어떤 영향을 주는지 즉시 확인할 수 있습니다. 원하는 모양이 완성되면 최적화된 CSS 코드를 클립보드에 바로 복사할 수 있습니다.

모든 계산과 미리보기는 브라우저 내에서 로컬로 처리되므로, 속도가 매우 빠르며 개인정보가 완벽히 보호됩니다. 사용자가 디자인하거나 클릭한 어떤 데이터도 서버로 업로드되지 않습니다.

CSS 둥근 모서리 마스터하기

border-radius 속성은 모던 웹 디자인의 핵심 요소로, 버튼, 이미지, 모달, 레이아웃 컨테이너 등의 날카로운 모서리를 부드럽게 만드는 데 사용됩니다. 겉보기에는 간단해 보이지만, 특정 모서리만 다르게 설정하려고 하면 문법이 생각보다 까다로울 수 있습니다.

이 border-radius CSS 생성기는 CSS 단축 속성(shorthand) 문법을 쉽게 이해하고 활용하도록 도와줍니다. 모든 모서리를 연결하면 단일 값으로 출력됩니다(예: border-radius: 16px;). 모서리 연결을 해제하여 원하는 모양을 만들면, 입력한 값에 맞춰 CSS 코드가 자동으로 포맷팅됩니다:

  • 4개의 값: 4개의 모서리 값이 모두 다를 경우, 좌측 상단부터 시계 방향으로 값이 적용됩니다(예: border-radius: 16px 8px 4px 2px;).
  • 2개의 값: 좌측 상단과 우측 하단이 같고, 우측 상단과 좌측 하단이 같을 경우, 코드를 2개의 값으로 스마트하게 축약합니다(예: border-radius: 16px 0;).

픽셀 vs 퍼센트

CSS로 모서리를 둥글게 만들 때 가장 흔히 하는 고민은 적절한 단위를 선택하는 것입니다. 이 도구를 사용하면 UI 디자인에서 각각 고유한 역할을 하는 픽셀(px)과 퍼센트(%)를 쉽게 전환할 수 있습니다.

**픽셀(px)**은 절대 단위입니다. 12px의 border-radius는 작은 버튼이나 큰 히어로 이미지 등 어디에 적용해도 항상 동일하게 보입니다. 픽셀은 앱 전체에 걸쳐 일관된 디자인을 유지해주므로 카드, 드롭다운 메뉴, 입력 필드 같은 UI 요소에 기본적으로 사용됩니다. 이 도구에서는 픽셀 값을 최대 200px까지 설정할 수 있습니다.

**퍼센트(%)**는 요소 자체의 크기에 비례하는 상대 단위입니다. 정사각형 요소에 50%의 border-radius를 적용하면, 크기가 50픽셀이든 500픽셀이든 항상 완벽한 원이 만들어집니다. 직사각형 요소라면 50% 적용 시 타원형이 됩니다. 퍼센트는 프로필 아바타나 장식용 배경 도형 같은 반응형 요소에 적합합니다. CSS에서는 이 값을 넘어가도 시각적으로 더 둥글어지지 않기 때문에, 이 도구에서는 퍼센트 값을 최대 50%로 제한합니다.

단순한 모서리 둥글기를 넘어: CSS 도형 생성기

border-radius는 주로 모서리를 부드럽게 깎는 데 쓰이지만, 강력한 CSS 도형 생성기 역할도 합니다. 각 모서리 값을 분리하고 극단적인 값을 조합하면 SVG 파일이나 복잡한 clip-path 없이도 독특한 기하학적 도형을 만들 수 있습니다. 이 도구는 이를 확인해 볼 수 있는 몇 가지 프리셋을 제공합니다:

  • 알약: 모든 모서리에 매우 큰 픽셀 값(예: 9999px)을 적용하면 "알약" 또는 트랙 모양이 만들어집니다. 뱃지, 태그, 모던한 CTA 버튼에 널리 쓰이는 형태입니다. 브라우저가 요소 높이의 정확히 절반까지만 둥글기를 적용하므로 양 끝이 완벽한 반원이 됩니다.
  • 원: 모든 모서리를 50%로 설정하면 정사각형이 완벽한 원으로 바뀝니다.
  • 나뭇잎: 좌측 상단과 우측 하단 모서리를 0으로, 우측 상단과 좌측 하단 모서리를 큰 값(예: 48px)으로 설정하면 비대칭적이고 자연스러운 나뭇잎 모양이 만들어집니다.
  • 탭: 하단 모서리는 0으로 둔 채 좌측 상단과 우측 상단 모서리만 둥글게(예: 16px) 만들면 네비게이션 메뉴에 어울리는 클래식한 폴더 탭 모양이 완성됩니다.

UI 컴포넌트 완성하기

둥근 모서리는 단독으로 쓰이기보다는 통일성 있는 전체 디자인 시스템의 일부로 활용되는 경우가 많습니다. 예를 들어, 잘 만들어진 카드 컴포넌트는 자연스러운 모서리 둥글기에 깊이감과 색상을 더해 페이지에서 돋보이도록 디자인됩니다.

원하는 모서리 둥글기를 설정했다면, 다른 CSS 효과와 결합해 디자인을 완성해 보세요. 박스 그림자 생성기를 사용해 부드러운 그림자 효과를 더하면 요소가 화면에 떠 있는 듯한 입체감을 줄 수 있습니다. 버튼이나 장식용 배경 요소를 디자인할 때는 CSS 그라데이션 생성기로 생동감 넘치는 배경을 적용하거나, 색상 팔레트 생성기를 이용해 완벽하게 조화로운 단색 조합을 찾아보세요.

자주 묻는 질문 (FAQ)

CSS border-radius 속성이란 무엇인가요?
border-radius CSS 속성은 요소의 바깥쪽 테두리 모서리를 둥글게 만듭니다. 하나의 반지름 값을 설정해 원이나 둥근 사각형을 만들거나, 각 모서리마다 다른 반지름을 지정해 복잡한 모양을 만들 수도 있습니다.
픽셀(px)과 퍼센트(%) 중 어떤 것을 사용해야 하나요?
표준 8px 둥근 카드처럼 요소의 크기와 관계없이 고정되고 일관된 곡선을 원할 때는 픽셀(px)을 사용하세요. 50%를 적용해 완벽한 원이나 타원을 만드는 것처럼 요소의 크기에 비례해 곡선이 변경되게 하려면 퍼센트(%)를 사용하세요.
CSS로 완벽한 원을 만들려면 어떻게 해야 하나요?
완벽한 원을 만들려면 HTML 요소의 너비와 높이가 같아야 하며(정사각형), border-radius를 50%로 설정해야 합니다. 이 도구의 "Circle" 프리셋을 사용하면 정확한 코드를 생성할 수 있습니다.
알약 모양은 어떻게 만드나요?
알약 모양은 border-radius에 9999px과 같이 매우 높은 픽셀 값을 설정하여 만듭니다. 이렇게 하면 요소의 너비와 상관없이 왼쪽과 오른쪽(또는 위와 아래) 가장자리가 완전히 둥근 반원이 됩니다.
생성된 CSS에 값이 4개 미만인 이유는 무엇인가요?
CSS는 border-radius에 단축 속성을 사용합니다. 네 모서리가 모두 같으면 하나의 값(예: 16px)을 출력합니다. 좌측 상단/우측 하단이 같고 우측 상단/좌측 하단이 같으면 두 개의 값을 출력합니다. 이를 통해 CSS 코드를 깔끔하고 간결하게 유지할 수 있습니다.
내 디자인 데이터가 어딘가에 저장되나요?
아니요, 이 border radius 생성기는 100% 사용자의 브라우저에서만 실행됩니다. 어떤 데이터도 서버로 전송되거나 저장되지 않으므로 빠르고 안전하게 사용할 수 있습니다.

관련 도구

박스 섀도우 생성기실시간 미리보기를 통해 부드럽고 선명한 다중 또는 내부 그림자를 세밀하게 조정하고 CSS 코드를 복사하세요.CSS 그라데이션 생성기선형, 방사형, 원뿔형 그라데이션 배경을 시각적으로 디자인하고 CSS 코드를 복사하세요.컬러 팔레트 생성기색상을 하나 선택하면 색채 이론에 기반한 조화로운 5색 팔레트를 만들어 줍니다.색맹 시뮬레이터색각 이상자의 시선으로 이미지를 미리 확인하여 디자인 접근성을 검토해 보세요.색상 대비 검사기텍스트의 가독성을 확인하고, WCAG 기준을 통과하는 가장 가까운 색상을 찾아보세요.색상 변환기HEX, RGB, HSL, HSV, CMYK 색상을 자유롭게 변환하고 명암비를 확인하세요.