값을 넣으면 실제 상자에서 그려지는 모서리까지 보이는 생성기
CSS 둥근 모서리 생성기는 네 모서리의 반지름을 정해 border-radius 코드를 만들고, 그 값이 실제 크기의 상자에서 어떻게 그려지는지 함께 보여 줍니다. 너비 320px, 높이 200px인 카드에 border-radius: 16px;를 주면 네 모서리가 반지름 16px인 사분원으로 깎입니다. 가로 반지름과 세로 반지름을 따로 정하면 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;처럼 슬래시(/)가 들어간 타원 모서리도 만들 수 있습니다.
모서리 칸에 숫자를 넣거나 무대의 레일 손잡이를 끌면 모양과 코드가 함께 바뀝니다. 반지름이 너무 커서 이웃한 곡선이 서로 겹치면 브라우저는 모든 반지름을 같은 비율로 줄여서 그리는데, 이 도구는 그 줄어든 값을 안내선과 변 점검 막대로 보여 주고 '줄어든 값으로 바꾸기' 한 번으로 칸의 숫자를 화면과 맞춥니다. 같은 값을 버튼·태그·입력칸·카드·사진·프로필 사진 크기에 붙인 모습과, 카드 안 사진에 줄 안쪽 반지름도 함께 계산합니다.
숫자만 보고 정하면 어긋나는 이유
같은 24px이라도 높이 44px인 버튼에서는 양 끝이 반원인 알약 모양이 되고, 큰 카드에서는 살짝 둥근 모서리에 그칩니다. 퍼센트는 상자의 너비와 높이를 각각 기준으로 삼기 때문에 정사각형이 아니면 원형이 아닌 타원 모서리가 됩니다. 그래서 반지름은 숫자보다 '어떤 크기의 상자에 붙는가'를 먼저 봐야 하고, 이 도구가 상자 크기와 실제 요소 미리 보기를 함께 두는 이유도 그것입니다.
- 디자인 시스템의 모서리 단계를 정할 때: 버튼 8px, 카드 16px처럼 값을 정하기 전에 같은 값이 버튼·태그·카드·사진에서 어떻게 보이는지 한 화면에서 비교합니다.
- 시안에 적힌 값을 코드로 옮길 때: 시안의 상자 크기를 그대로 넣고 모서리 값을 맞춰 보면, 브라우저가 줄여 그리는 경우를 코드를 붙이기 전에 알 수 있습니다.
- 알약 버튼이나 원형 사진을 만들 때:
9999px와50%가 어떤 상자에서 같은 모양이 되고 어떤 상자에서 달라지는지 확인합니다. - 물방울·블롭 같은 유기적인 모양이 필요할 때: 슬래시가 들어간 여덟 개의 값을 손으로 맞추기는 어렵습니다. 예시에서 시작해 손잡이로 다듬으면 됩니다.
- 카드 안에 사진이나 버튼을 넣을 때: 안쪽 요소에 바깥과 같은 값을 주면 모서리 쪽 틈이 두꺼워 보입니다. 간격을 넣으면 맞는 안쪽 반지름을 바로 냅니다.
쓰는 법
- '모양 고르기'에서 가까운 모양을 누르거나, 상자 너비와 높이를 실제로 쓸 크기로 넣습니다.
- 단위(px·%)와 반지름 방식(원형·타원)을 고릅니다. 타원을 고르면 모서리마다 가로(↔)와 세로(↕) 칸이 생기고, 무대 왼쪽·오른쪽에 세로 반지름 레일이 나타납니다.
- 네 모서리 칸에 숫자를 넣거나 레일의 손잡이를 끕니다. 손잡이에 초점을 두고 화살표 키를 누르면 1씩, Shift와 함께 누르면 10씩 바뀝니다. '네 모서리 함께'를 켜면 한 모서리만 바꿔도 나머지가 따라옵니다.
- 변 점검 막대가 주황색이 되면 그 변의 반지름 합이 변보다 길어 브라우저가 줄여 그린다는 뜻입니다. 화면 그대로의 숫자가 필요하면 '줄어든 값으로 바꾸기'를 누릅니다.
- '실제 크기에서 보기'로 다른 요소에서도 괜찮은지 보고, 'CSS 복사'로 코드를 가져갑니다. 한 줄과 모서리별 속성, px와 rem 중에서 형식을 고를 수 있고, '링크 복사'는 지금 설정을 주소에 담습니다.
값의 순서와 줄여 쓰기
border-radius의 값은 왼쪽 위에서 시작해 시계 방향으로 오른쪽 위, 오른쪽 아래, 왼쪽 아래에 붙습니다. 값을 덜 쓰면 빠진 모서리는 이미 적은 모서리의 값을 가져갑니다. 왼쪽 아래가 빠지면 오른쪽 위와 같고, 오른쪽 아래가 빠지면 왼쪽 위와 같으며, 오른쪽 위까지 빠지면 왼쪽 위와 같습니다.
| 쓴 값 | 왼쪽 위 | 오른쪽 위 | 오른쪽 아래 | 왼쪽 아래 |
|---|---|---|---|---|
16px | 16 | 16 | 16 | 16 |
16px 8px | 16 | 8 | 16 | 8 |
16px 8px 4px | 16 | 8 | 4 | 8 |
16px 8px 4px 2px | 16 | 8 | 4 | 2 |
20px / 10px | 20 × 10 | 20 × 10 | 20 × 10 | 20 × 10 |
두 값을 쓰면 위·아래가 아니라 대각선끼리 짝이 됩니다. 슬래시 앞의 값들은 가로 반지름, 뒤의 값들은 세로 반지름이고 양쪽 모두 같은 줄여 쓰기 규칙을 따릅니다. 한 모서리만 바꿀 때는 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius를 쓰고, 여기서는 슬래시 없이 40px 20px처럼 가로·세로를 띄어 씁니다. 이 도구의 '한 줄' 코드는 같은 값을 최대한 줄여서 내고, '모서리별'은 네 속성을 따로 냅니다.
px와 %는 어떻게 다르게 그려지나
px 반지름은 상자 크기와 관계없이 같은 길이입니다. % 반지름은 가로 반지름이 테두리 상자의 너비를, 세로 반지름이 높이를 기준으로 계산됩니다. 그래서 같은 10%라도 너비 300px, 높이 180px인 카드에서는 가로 30px, 세로 18px인 타원 모서리가 됩니다. 아래 표는 같은 값을 세 가지 크기에 붙였을 때 브라우저가 실제로 그리는 반지름(가로 × 세로)입니다.
| 값 | 버튼 128 × 44 | 카드 300 × 180 | 정사각형 160 × 160 |
|---|---|---|---|
24px | 22px (줄어듦 × 0.917) | 24px | 24px |
10% | 12.8 × 4.4px | 30 × 18px | 16px |
50% | 64 × 22px (타원) | 150 × 90px (타원) | 80px (원) |
9999px | 22px (알약) | 90px (알약) | 80px (원) |
크기가 다른 요소에 같은 둥글기를 주고 싶다면 px가 맞고, 상자 크기에 비례하는 곡선이 필요하면 %가 맞습니다. 이 도구에서 단위를 바꾸면 지금 그려지는 모양이 그대로 유지되도록 값을 다시 계산합니다. 정사각형이 아닌 상자에서 px를 %로 바꾸면 가로와 세로 값이 달라지므로 타원 반지름으로 바뀝니다.
큰 값을 넣어도 더 둥글어지지 않는 이유
명세는 변마다 그 변에 닿는 두 모서리의 반지름 합을 변 길이와 비교합니다. 위·아래 변은 가로 반지름 둘의 합을 너비와, 왼쪽·오른쪽 변은 세로 반지름 둘의 합을 높이와 견줍니다. 네 변 가운데 '변 길이 ÷ 반지름 합'이 가장 작은 값을 f라고 할 때 f가 1보다 작으면 모든 모서리의 반지름에 f를 곱해서 그립니다. 사분원은 사분원으로 남고 큰 반지름은 여전히 작은 반지름보다 크지만, 이미 충분히 작던 모서리도 함께 줄어듭니다.
| 상자 | 값 | 가장 넘치는 변 | f | 그려지는 반지름 |
|---|---|---|---|---|
| 240 × 120 | 100px | 왼쪽 변 200 / 120 | 0.6 | 60px |
| 280 × 72 | 9999px | 왼쪽 변 19998 / 72 | 0.0036 | 36px (알약) |
| 200 × 100 | 150px 10px 10px | 왼쪽 변 160 / 100 | 0.625 | 왼쪽 위 93.75px, 나머지 6.25px |
| 200 × 200 | 100px | 네 변 200 / 200 | 1 | 100px (원) |
세 번째 줄을 보면 왼쪽 위의 큰 반지름 때문에 10px로 정한 나머지 세 모서리가 6.25px로 줄어듭니다. 작은 모서리를 정확히 지키려면 큰 반지름을 변 길이 안으로 낮추세요. 알약 버튼에 흔히 쓰는 9999px는 이 규칙을 이용한 값입니다. 반지름이 짧은 변의 절반으로 줄어들어 높이가 달라져도 늘 양 끝이 반원이 됩니다.
타원 모서리와 슬래시
모서리 하나는 가로 반지름과 세로 반지름을 가진 타원의 4분의 1입니다. 두 값이 같으면 사분원이고, 다르면 한쪽으로 길게 늘어난 곡선이 됩니다. border-radius: 50% / 60% 60% 40% 40%;는 가로는 모두 너비의 절반, 세로는 위쪽 두 모서리가 높이의 60%, 아래쪽이 40%라서 위가 길쭉한 달걀 모양이 됩니다. 네 모서리의 가로·세로 값을 모두 다르게 주면 블롭처럼 손으로 그린 듯한 모양이 나옵니다.
가로나 세로 반지름 중 하나라도 0이면 그 모서리는 곡선 없이 각지게 그립니다. 다만 0이 아닌 쪽 값은 변의 반지름 합에는 그대로 들어가기 때문에 다른 모서리를 줄이는 원인이 될 수 있습니다. Chrome에서 그려 봐도 명세대로 다른 모서리가 함께 줄어듭니다. 반지름에 음수는 쓸 수 없고, 음수가 든 선언은 무시됩니다.
안쪽 요소의 반지름: 바깥 − 간격
카드 안에 사진을 넣고 사방에 간격을 두면, 사진의 모서리는 카드보다 간격만큼 안쪽에서 휘어야 두 곡선 사이의 틈이 고르게 보입니다. 명세도 같은 방식으로 상자 안쪽 곡선을 정합니다. 테두리 안쪽(padding edge)의 반지름은 바깥 반지름에서 테두리 두께를 뺀 값이고, 내용 영역의 반지름은 거기서 다시 padding을 뺀 값이며, 0보다 작아지면 0입니다.
| 바깥 | 간격 | 안쪽 반지름 | 보이는 모습 |
|---|---|---|---|
24px (320 × 200) | 8px | 16px | 틈이 고르게 이어짐 |
16px (320 × 200) | 16px | 0 | 안쪽은 각진 모서리가 맞음 |
12px (320 × 200) | 20px | 0 | 간격이 반지름보다 큼 |
9999px (280 × 72) | 6px | 30px | 안쪽도 알약 |
50% (200 × 200) | 12px | 88px | 안쪽도 원 |
안쪽 요소에 바깥과 같은 값을 주면 모서리 부분의 틈이 변보다 두꺼워져 사진이 안쪽으로 몰린 듯 보입니다. 위의 '안쪽 모서리 맞추기'에서 두 경우를 나란히 비교할 수 있습니다. 바깥이 %로 정해져 있어도 안쪽 값은 그려지는 반지름에서 뺀 px로 냅니다.
안의 사진이 모서리 밖으로 나올 때
부모 상자에 반지름을 줘도 자식 요소가 저절로 잘리지는 않습니다. 명세에 따르면 배경은 곡선을 따라 잘리지만, 자식이 곡선 밖으로 나가지 않게 하려면 부모의 overflow를 visible이 아닌 값(hidden이나 clip)으로 바꿔야 합니다. 이때 잘리는 기준은 테두리 안쪽의 곡선입니다. 사진 자체에 반지름을 줘도 되는데, img 같은 대체 요소는 내용이 자신의 곡선을 따라 잘리기 때문입니다.
반지름은 누를 수 있는 영역도 줄입니다. 포인터 이벤트도 둥근 테두리를 따라 잘리기 때문에, 44 × 44px 단추에 50%를 주면 누를 수 있는 넓이는 원의 넓이만큼인 약 78.5%로 줄어듭니다. 명세도 반지름을 크게 줄 때는 권장하는 최소 터치 크기를 지키도록 너비와 높이를 넉넉히 잡으라고 적고 있습니다.
자주 쓰는 모양의 값
'모양 고르기'의 열두 가지 값입니다. 상자 크기까지 함께 써야 같은 모양이 나옵니다. 특히 % 값은 상자 비율이 바뀌면 모양도 바뀝니다.
| 모양 | 상자 | CSS |
|---|---|---|
| 카드 | 320 × 200 | border-radius: 16px; |
| 알약 버튼 | 280 × 72 | border-radius: 9999px; |
| 원 | 200 × 200 | border-radius: 50%; |
| 타원 | 320 × 180 | border-radius: 50%; |
| 위쪽만 둥글게 | 320 × 200 | border-radius: 24px 24px 0 0; |
| 말풍선 | 300 × 140 | border-radius: 24px 24px 24px 4px; |
| 물방울 | 200 × 200 | border-radius: 50% 0 50% 50%; |
| 잎 | 200 × 200 | border-radius: 0 50%; |
| 반원 | 240 × 120 | border-radius: 120px 120px 0 0; |
| 달걀 | 200 × 260 | border-radius: 50% / 60% 60% 40% 40%; |
| 블롭 | 240 × 240 | border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
| 유기적 블롭 | 240 × 240 | border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; |
브라우저 지원과 새 속성 corner-shape
| 기능 | Chrome | Firefox | Safari |
|---|---|---|---|
border-radius (모서리별 네 값) | 4 | 4 | 5 |
| 타원 반지름(슬래시) | 1 | 4 | 3 |
| % 값 | 8 | 4 | 5.1 |
논리 속성 border-start-start-radius | 89 | 66 | 15 |
corner-shape (실험 기능) | 139 | 미리 보기판만 | 미리 보기판만 |
border-radius는 오래전부터 모든 주요 브라우저가 지원하므로 접두사 없이 쓰면 됩니다. 글을 오른쪽에서 왼쪽으로 쓰거나 세로로 쓰는 페이지에서는 border-start-start-radius 같은 논리 속성을 쓰면 글 방향에 따라 모서리가 바뀝니다. CSS Borders 4 편집자 초안의 corner-shape는 반지름이 정한 영역 안에서 곡선의 모양을 round, squircle, bevel, scoop, notch, square, superellipse() 가운데 하나로 바꾸는 속성입니다. 아직 실험 기능이라 Chrome 139 이상에서만 보이고, 이 도구의 미리 보기는 border-radius의 둥근 곡선만 그립니다.
자주 틀리는 경우
- 순서를 반시계 방향으로 생각함: 네 값은 왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래, 시계 방향입니다.
- 두 값을 위·아래로 읽음:
16px 8px는 왼쪽 위·오른쪽 아래가 16px, 오른쪽 위·왼쪽 아래가 8px입니다. 위쪽만 둥글게 하려면16px 16px 0 0을 씁니다. - 직사각형에 50%를 주고 알약을 기대함: 너비와 높이가 다르면 50%는 타원이 됩니다. 양 끝만 반원인 알약은 높이의 절반 이상인 px 값이나
9999px로 만듭니다. - 슬래시를 모서리마다 넣음:
10px / 20px 30px / 40px처럼 슬래시를 두 번 쓰면 선언 전체가 무시됩니다. 슬래시는 가로 값 목록과 세로 값 목록 사이에 한 번만 씁니다. - 부모에만 반지름을 주고 사진이 삐져나옴: 부모에
overflow: hidden을 주거나 사진에도 반지름을 줍니다. - 안쪽 요소에 바깥과 같은 값을 줌: 틈이 모서리에서 두꺼워집니다. 바깥 반지름에서 간격을 뺀 값을 씁니다.
- % 반지름의 기준을 하나로 생각함: 가로 반지름은 너비, 세로 반지름은 높이 기준이라 정사각형이 아니면 같은 %도 두 길이가 다릅니다.
한계와 주의
- 입력 단위는 px와 %입니다. rem은 px 값을 루트 글자 크기 16px로 나눠 보여 주는 출력 형식이며, em·vw 같은 단위는 다루지 않습니다.
- 반지름은 소수 첫째 자리까지 px 0~9999, % 0~100이고, 상자는 너비 40~800px, 높이 40~600px입니다. 무대보다 큰 상자는 줄여서 보이며, 배율은 무대 왼쪽 위에 표시합니다.
- 상자 크기는 테두리까지 포함한 크기로 봅니다. 실제 요소에 테두리나 padding이 있고
box-sizing이content-box라면, % 반지름의 기준이 되는 크기가 넣은 너비·높이보다 커집니다. - 명세는 곡선이 스크롤바 같은 화면 요소와 부딪히면 브라우저가 해당 반지름을 더 줄일 수 있다고 허용합니다. 그런 경우에는 이 도구의 계산보다 작게 그려질 수 있습니다.
- 안쪽 반지름은 사방 간격이 같다고 보고 계산합니다. 좌우와 위아래 간격이 다르면 가로 반지름에서는 좌우 간격을, 세로 반지름에서는 위아래 간격을 빼야 합니다.
corner-shape는 미리 보지 않습니다. 곡선 가장자리의 부드러운 정도는 화면 배율과 기기 픽셀 비율에 따라 조금씩 다르게 보일 수 있습니다.
기준일 W3C CSS Backgrounds and Borders Module Level 3(Candidate Recommendation Draft 2024-03-11), CSS Borders and Box Decorations Module Level 4(Editor's Draft 2026-10-15), MDN 호환성 자료(browser-compat-data 8.1.6)는 2026-10-22에 원문으로 확인했습니다. 표의 숫자는 이 도구의 계산 코어로 구했고, 겹침 줄임과 0인 축의 처리는 Chromium 151에서 실제로 그려 대조했습니다.
출처
- 01W3C: CSS Backgrounds and Borders Module Level 3Candidate Recommendation Draft 2024-03-11. §4.1 값 순서·생략·슬래시·% 기준·음수 무효, §4.2 안쪽 곡선(바깥 − 테두리), §4.3 곡선을 따라 잘리는 것, §4.5 겹치는 곡선 f = min(L/S)
- 02MDN: border-radius문법과 예시, 브라우저 호환성(네 값 Chrome 4·Firefox 4·Safari 5, % 값 Chrome 8·Firefox 4·Safari 5.1)
- 03W3C CSSWG: CSS Borders and Box Decorations Module Level 4Editor's Draft 2026-10-15. corner-shape 값 round, scoop, bevel, notch, square, squircle, superellipse()
- 04MDN: corner-shape실험 기능, 호환성 자료 Chrome 139, Firefox·Safari는 미리 보기판
- 05MDN: border-start-start-radius글쓰기 방향에 따르는 논리 모서리 속성, 호환성 자료 Chrome 89·Firefox 66·Safari 15
자주 묻는 질문
border-radius 네 값은 어떤 순서로 붙나요?
왼쪽 위에서 시작해 시계 방향으로 오른쪽 위, 오른쪽 아래, 왼쪽 아래에 붙습니다. 값을 덜 쓰면 빠진 모서리는 이미 적은 모서리의 값을 가져갑니다(왼쪽 아래 = 오른쪽 위, 오른쪽 아래 = 왼쪽 위, 오른쪽 위 = 왼쪽 위). 그래서 두 값 16px 8px는 왼쪽 위·오른쪽 아래가 16px, 오른쪽 위·왼쪽 아래가 8px입니다.
슬래시(/)가 들어간 border-radius는 무슨 뜻인가요?
슬래시 앞의 값들이 가로 반지름, 뒤의 값들이 세로 반지름입니다. 가로와 세로가 다르면 모서리가 사분원이 아니라 타원의 4분의 1이 됩니다. border-radius: 50% / 60% 60% 40% 40%;는 위가 길쭉한 달걀 모양을 만듭니다. 슬래시는 한 선언에 한 번만 쓸 수 있습니다.
50%와 9999px는 어떻게 다른가요?
정사각형에서는 둘 다 원이 됩니다. 직사각형에서 50%는 가로 반지름이 너비의 절반, 세로 반지름이 높이의 절반이라 타원이 되고, 9999px는 브라우저가 짧은 변의 절반까지 줄여 그려서 양 끝만 반원인 알약 모양이 됩니다. 128 × 44px 버튼이라면 50%는 64 × 22px 타원, 9999px는 22px 반원입니다.
반지름을 크게 넣었는데 왜 더 둥글어지지 않나요?
한 변에 닿는 두 반지름의 합이 변 길이보다 길면, 브라우저가 네 변 중 가장 많이 넘치는 비율 f = 변 길이 ÷ 반지름 합을 모든 모서리에 곱해 줄이기 때문입니다. 240 × 120px 상자에 100px를 주면 왼쪽 변 합 200px가 높이 120px를 넘어 f = 0.6이 되고, 실제 반지름은 60px입니다. 이 도구는 그 값을 변 점검 막대로 보여 줍니다.
% 반지름은 무엇을 기준으로 하나요?
가로 반지름은 테두리까지 포함한 상자의 너비, 세로 반지름은 높이를 기준으로 합니다. 그래서 300 × 180px 카드에 10%를 주면 가로 30px, 세로 18px인 타원 모서리가 됩니다. 크기가 다른 요소에 같은 둥글기를 주려면 px가 맞습니다.
카드 안 사진의 모서리 반지름은 얼마로 해야 하나요?
사방 간격이 같다면 바깥 반지름에서 간격을 뺀 값이 맞습니다. 바깥 24px, 간격 8px이면 안쪽은 16px이고, 결과가 0보다 작으면 0으로 둡니다. 명세가 테두리 안쪽 곡선을 정하는 방식(바깥 반지름 − 테두리 두께)과 같은 원리입니다.
둥근 카드 안의 이미지가 모서리 밖으로 나오는 이유는 무엇인가요?
부모의 반지름은 배경만 곡선을 따라 자르고 자식 요소는 자르지 않기 때문입니다. 부모에 overflow: hidden이나 clip을 주면 테두리 안쪽 곡선에서 잘리고, 이미지 자체에 반지름을 줘도 이미지 내용이 그 곡선을 따라 잘립니다.
squircle처럼 더 매끄러운 모서리도 만들 수 있나요?
CSS Borders 4 초안의 corner-shape 속성이 squircle·bevel·scoop·notch 같은 모양을 정합니다. 다만 아직 실험 기능이라 MDN 호환성 자료 기준으로 Chrome 139 이상에서만 보이고 Firefox와 Safari는 미리 보기판에만 있습니다. 이 도구는 border-radius의 둥근 곡선만 미리 보여 줍니다.