🔲 CSS border-radius 생성기
네 모서리 반지름을 px·%로 조절해 border-radius 코드를 줄여 쓴 형태로 만들고, 원·알약·블롭 프리셋과 반지름 겹침 자동 축소를 계산해 줘요.
사용법
- 단위를 px 또는 %로 고르고, 네 모서리의 반지름을 넣어요. 순서는 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래 칸으로 보이지만 코드에는 CSS 규칙대로 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래 순서로 나와요.
- 타원처럼 가로와 세로 곡률을 다르게 하고 싶으면 세로 반지름 → 따로 입력을 골라요. 그러면 코드에 슬래시(/)가 들어간 형태가 나와요.
- 아래 미리보기 상자의 너비·높이를 실제로 쓸 요소의 크기에 맞추면, 반지름이 너무 커서 자동으로 줄어드는지까지 확인할 수 있어요.
- 위 큰 칸의 코드를 copy 해서 CSS에 붙여 넣으세요. 프리셋 버튼(카드·원·알약·위만 둥글게·말풍선·블롭)으로 시작해서 값을 조금씩 바꿔 보면 빨라요.
border-radius 값을 읽는 법
border-radius는 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 네 속성을 한 번에 쓰는 줄임 속성이에요. 값이 몇 개냐에 따라 의미가 달라져요.
| 값 개수 | 예시 | 적용 규칙 |
|---|---|---|
| 1개 | 8px | 네 모서리 모두 8px |
| 2개 | 10px 20px | 왼쪽 위·오른쪽 아래 = 10px, 오른쪽 위·왼쪽 아래 = 20px |
| 3개 | 10px 20px 30px | 왼쪽 위 = 10px, 오른쪽 위·왼쪽 아래 = 20px, 오른쪽 아래 = 30px |
| 4개 | 10px 20px 30px 40px | 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서(시계 방향) |
| 슬래시 | 60% 40% / 40% 60% | 슬래시 앞은 가로 반지름, 뒤는 세로 반지름. 각각 위 규칙대로 줄여 써요. |
이 도구는 네 값이 같으면 하나로, 대각선끼리 같으면 둘로, 오른쪽 위와 왼쪽 아래가 같으면 셋으로 자동으로 줄여 써요. 예를 들어 위쪽 두 모서리만 16px, 아래쪽은 직각이면 border-radius: 16px 16px 0 0;이 나오고, 0은 단위를 생략해요.
px와 %의 차이
px는 상자 크기와 상관없이 고정된 반지름이에요. 카드나 버튼처럼 모서리 느낌을 일정하게 유지하고 싶을 때 써요. %는 상자 크기에 비례해요. 가로 반지름은 상자 너비의 몇 %, 세로 반지름은 상자 높이의 몇 %인지로 계산해요. 그래서 가로 200px, 세로 100px 상자에 50%를 주면 모서리마다 가로 100px, 세로 50px의 타원 호가 되어 상자 전체가 타원이 돼요. 정사각형에 50%를 주면 완전한 원이에요.
원·알약·타원 만드는 법
| 모양 | 조건 | 코드 예시 |
|---|---|---|
| 원 | 너비 = 높이인 상자 | border-radius: 50%; |
| 알약(양끝이 반원) | 반지름 ≥ 높이의 절반 | 높이 60px이면 border-radius: 30px; 또는 큰 값(9999px) |
| 타원 | 너비 ≠ 높이인 상자 | border-radius: 50%; |
| 위만 둥근 카드(탭, 바텀시트) | 아래 두 모서리 0 | border-radius: 16px 16px 0 0; |
| 말풍선 | 한 모서리만 작게 | border-radius: 18px 18px 18px 2px; |
알약 버튼에는 9999px처럼 아주 큰 값을 쓰는 방식이 흔해요. 높이를 몰라도 항상 양끝이 반원이 되기 때문이에요. 아래 겹침 규칙 덕분에 가능한 방식이에요.
반지름이 너무 크면 어떻게 되나요 — 자동 축소 규칙
한 변에서 양끝 모서리의 반지름 합이 그 변의 길이보다 크면, 브라우저는 모든 모서리의 반지름을 같은 비율 f로 줄여서 맞춰요. CSS 명세(W3C CSS Backgrounds and Borders Module Level 3)는 각 변에서 변의 길이 ÷ 그 변의 반지름 합을 구해 가장 작은 값을 f로 쓴다고 정해요. f가 1보다 작을 때만 줄어들고, 줄어든 뒤에는 네 모서리가 모두 같은 비율로 작아져요.
직접 계산해 보면 이해가 쉬워요. 100×100px 상자에 모서리 80px을 주면 위쪽 변의 합이 80 + 80 = 160px로 변 길이 100px을 넘어서 f = 100 ÷ 160 = 0.625예요. 실제 반지름은 80 × 0.625 = 50px이 돼서 원이 돼요. 200×60px 알약에 30px을 주면 합이 60px로 높이와 같아 f = 1이라 그대로이고, 9999px을 주면 합이 19998px이라 f = 60 ÷ 19998이 되어 실제 반지름은 약 30px로 줄어들어 똑같은 알약이 돼요. 이 도구의 표에서 '실제 적용' 값과 축소 비율이 이 계산을 그대로 보여 줘요.
한 변만 넘쳐도 네 모서리 전체가 줄어든다는 점이 함정이에요. 예를 들어 위쪽 두 모서리를 70px, 50px로 주면(합 120px, 상자 너비 100px) f = 100 ÷ 120 ≈ 0.8333이 되어 나머지 모서리들도 같이 0.8333배로 줄어요. 모서리 모양이 의도와 다르게 나올 때는 반지름 합이 변 길이를 넘는지부터 확인해 보세요.
블롭(물방울) 모양 만들기
가로와 세로 반지름을 따로 주면 원이 아닌 유기적인 모양이 나와요. 200×200px 상자에 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;를 주면 왼쪽 위는 가로 120px, 세로 120px, 오른쪽 위는 가로 80px, 세로 60px 같은 식으로 모서리마다 곡률이 달라져요. 각 변에서 가로 합이 100%(60+40, 30+70)가 되도록 맞추면 자동 축소 없이 곡선이 변 전체를 부드럽게 채워서 가장 자연스러워요. 값이 100%를 넘으면 f가 줄어들어 의도보다 밋밋해져요.
자주 쓰는 UI 반지름 감각
정해진 표준 값은 없지만 많이 쓰는 감각은 있어요. 입력창·버튼은 4~8px, 카드는 8~16px, 모달·바텀시트는 위쪽만 16~24px, 프로필 이미지는 50%, 태그·칩은 알약 모양을 써요. 한 화면 안에서는 안쪽 요소의 반지름을 바깥 요소보다 작게 두면 여백 두께와 어우러져 정돈돼 보여요. 바깥 카드가 16px이고 안쪽 여백이 8px이면 안쪽 이미지는 8px 정도가 자연스러워요(바깥 반지름 − 여백). 이 값은 취향의 영역이니 미리보기를 보면서 여러 값을 비교해 정하세요.
border-radius를 쓸 때 알아 둘 점
- overflow — 자식 요소(이미지 등)가 둥근 모서리를 삐져나오면 부모에
overflow: hidden을 함께 주세요. - 테두리와 함께 — border가 있으면 바깥쪽 모서리는 border-radius 값, 안쪽 모서리는 (반지름 − 테두리 두께)로 그려져요. 테두리가 두꺼울수록 안쪽이 더 각져 보여요.
- 그림자 — box-shadow도 모서리 곡선을 따라가요. 그림자 모양은 CSS 박스 섀도우 생성기로 함께 맞춰 보세요.
- 반응형 — 크기가 변하는 요소에 모서리 느낌을 일정하게 하려면 px, 모양 비율을 유지하려면 %가 어울려요. 화면 폭에 따라 부드럽게 변하게 하고 싶으면 CSS clamp() 계산기로 만든 값을 쓸 수도 있어요.
- 접근성 — 모서리 모양은 장식이라 스크린리더와는 상관없지만, 버튼 영역이 줄어들어 터치하기 어려워지지 않게 최소 크기는 확인하세요.
속성의 정확한 문법과 브라우저 지원은 MDN의 border-radius 문서에서 확인할 수 있어요. 그라데이션 배경은 CSS 그라데이션 생성기와 같이 쓰면 카드 디자인을 빠르게 만들 수 있어요.