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 표.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

HTML 문자 참조

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

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

랜덤 영어 글자 생성기

A-Z 영어 글자를 무작위로 생성합니다. 개수와 대문자, 소문자, 혼합 대소문자를 선택해 게임, 과제, 수업 활동에 활용하세요.

랜덤 색상 팔레트 생성기

2~15개의 색상으로 랜덤 팔레트를 만들고, 비비드, 파스텔, muted, dark 스타일을 선택한 뒤 HEX 코드나 CSS 변수를 복사하세요.