Softonic

CSS Border Radius 생성기

단계 1 / 2 CSS 생성
결과

border-radius는 정사각형에 50%를 주면 원이 되는데 직사각형에 50%를 주면 타원이 되는 이유를 설명하려 하기 전까지는 단순해 보입니다. 이 생성기는 네 모서리 각각에 값을 입력하고 px, %, rem 중에서 선택한 뒤 생성된 정확한 단축 표기를 복사할 수 있게 해 줍니다. 버튼 모양, 카드 모서리, 알약 버튼, 비대칭 모서리에 유용합니다.

border-radius를 만드는 방법

  1. 1

    각 모서리 설정

    왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리에 반지름을 입력합니다.

  2. 2

    단위 선택

    픽셀(고정 크기), 퍼센트(요소 상대), rem(루트 글꼴 크기 상대).

  3. 3

    CSS 생성

    Generate CSS 버튼을 눌러 단축 표기를 만듭니다.

  4. 4

    규칙 복사

    `border-radius` 단축 표기를 복사해 스타일시트에 붙여 넣습니다.

단축 순서

border-radius: top-left top-right bottom-right bottom-left;

margin/padding과 동일: 왼쪽 위부터 시계방향. 생략된 값은 반대 모서리를 따라 합니다. 즉 border-radius: 10px 20px;는 왼쪽 위·오른쪽 아래 10px, 오른쪽 위·왼쪽 아래 20px입니다.

이 생성기가 만들지 않는 것

모서리마다 반지름 하나만 설정하므로 타원형 모서리(border-radius: 20px 10px / 5px 15px;처럼 슬래시를 쓰는 두 값 형식)나 border-top-left-radius 같은 풀 표기는 만들지 않습니다. 그런 게 필요하다면 CSS를 직접 작성하세요.

퍼센트 vs 픽셀

단위 동작
px 고정, 요소 크기에 따라 스케일하지 않음
% 요소 너비(가로)와 높이(세로)의 백분율
em 요소의 글꼴 크기에 따라 스케일
rem 루트 글꼴 크기에 따라 스케일

정사각형 요소에 50% = 원. 200x100 직사각형에서 50% = 가로 100px + 세로 50px 반경 = 타원.

흔한 모양

모양 CSS
원(정사각형) border-radius: 50%;
알약 border-radius: 9999px; (높이 절반 이상의 값이면 무엇이든)
둥근 카드 border-radius: 8px; 또는 12px
채팅 버블 border-radius: 18px 18px 0 18px; (꼬리가 오른쪽 아래)
은은함 border-radius: 2px; 또는 4px

알약을 위한 “높이의 절반” 규칙

알약 버튼은 가로 양 끝이 완벽한 반원인 직사각형입니다. 이를 확실히 얻으려면 border-radius를 요소 높이의 최소 절반으로 설정하세요. 브라우저가 반경을 실제 기하에 맞춰 제한하므로 9999px(또는 매우 큰 값)을 쓰는 것이 안전합니다.

overflow와의 상호작용

border-radius는 기본적으로 배경, 테두리, box-shadow만 잘라냅니다. 자식 요소(이미지, 중첩 요소)를 둥근 모양에 맞춰 자르려면 다음을 추가하세요:

overflow: hidden;

또는 쌓임 맥락도 담으려면 isolation: isolate + overflow: hidden을 쓰세요.

접근성 참고

border-radius 자체에는 접근성 문제가 없지만, 인터랙티브 요소(알약, 칩)의 극단적 둥글기가 탭 타깃을 줄여서는 안 됩니다. 모서리 둥글기와 무관하게 버튼을 최소 44x44 px(WCAG 권장)로 유지하세요.

자주 묻는 질문

퍼센트 border-radius는 가로로 “너비의 %”, 세로로 “높이의 %“로 측정되기 때문입니다, 정사각형이 아닌 요소에서는 타원이 됩니다. 원을 만들려면 요소가 정사각형이거나, 요소 치수에 맞는 픽셀 값을 쓰세요.

기본적으로 배경, 테두리, box-shadow만요. 부모에 overflow: hidden을 추가하지 않으면 자식 요소는 잘리지 않습니다.

수치 값 사이에서 애니메이션 가능합니다: transition: border-radius 200ms;가 픽셀과 퍼센트에 작동합니다. 복잡한 타원형 단축과 단순 반경 사이를 애니메이션하면 의외의 중간 프레임이 나올 수 있으니, 이상해 보이면 시작/끝 상태를 테스트하고 단순화하세요.

스펙은 상한을 두지 않지만 브라우저가 실효 반경을 요소의 짧은 변의 절반으로 제한합니다. 높이 40px 버튼에 border-radius: 9999px를 쓰면 알약이 됩니다, 브라우저가 조용히 20px로 제한합니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다