이 CSS border-radius 생성기는 상자의 모서리마다 반경을 따로 주고, 결과를 가장 짧은 border-radius 축약형으로 써 줍니다. 각 모서리에는 곡선이 끝나는 지점에 둥근 핸들이 있어서, 끌면 포인터 아래에서 상자 모양이 바로 바뀝니다. 미리보기 옆 입력란에도 같은 숫자가 있으므로 직접 입력하거나 좌우로 끌어 조절하고, 방향키로 미세 조정할 수도 있습니다.
슬라이더만 있는 도구가 못 하는 일을 스위치 세 개가 맡습니다. 단위 스위치는 픽셀(0~200)과 퍼센트(0~100)를 오가며, 미리보기 상자 크기를 기준으로 현재 모양을 그대로 변환합니다. 타원 스위치는 모서리마다 가로·세로 반경을 따로 주는데, 블롭이나 나뭇잎 같은 유기적 모양의 바탕이 되는 가로 / 세로 슬래시 문법입니다. 연결 스위치는 네 모서리를 함께 움직여 균일하게 둥글립니다.
출력에서는 군더더기를 모두 없앱니다. 네 모서리가 같으면 값 하나, 마주 보는 모서리끼리 같은 나뭇잎은 값 둘로 나오고, 슬래시 부분은 가로 반경이 세로 반경과 다른 모서리가 있을 때만 붙습니다. 정한 반경이 상자보다 커서 브라우저가 줄여 그릴 때는 줄어드는 비율을 알려 줍니다. 모든 처리는 브라우저 안에서 이루어지며 업로드되는 것은 없습니다.
사용 방법
예제나 기본 나뭇잎에서 시작
알약, 원, 나뭇잎, 블롭, 탭, 둥근 사각형 중에서 고르거나 기본값인
16px 40px나뭇잎으로 시작하세요. 예제는 그 모양에 필요한 단위와 타원 스위치도 함께 맞춰 줍니다.모서리 핸들 끌기
핸들은 해당 모서리 곡선이 끝나는 지점입니다. 타원 모서리가 꺼져 있으면 끌어서 원형 반경 하나를 정하고, 켜져 있으면 가로·세로 반경이 포인터를 따라 각각 바뀝니다. 핸들에 초점을 두고 방향키를 누르면 1단위, Shift와 함께 누르면 10단위씩 움직입니다.
px 또는 % 선택
픽셀은 상자 크기와 관계없이 곡선이 같고, 퍼센트는 상자에 비례합니다. 정사각형에서
50%는 원이고 직사각형에서는 타원이 됩니다. 단위를 바꿔도 모양이 초기화되지 않고 현재 모양이 변환됩니다.필요하면 연결하거나 타원으로
모서리 함께 조절을 켜면 네 모서리가 같이 움직이고, 타원 모서리를 켜면 입력란에서 모서리마다 가로·세로 반경을 따로 정할 수 있습니다.
경고를 확인하고 복사
반경이 줄어들어 그려진다는 안내가 보이면 값을 낮춰 정확한 결과를 확인하세요. 버튼이나 Ctrl/Cmd+Enter로
border-radius: ...;줄을 복사합니다.
작동 원리
축약형이 짧아지는 규칙
W3C CSS Backgrounds and Borders Module Level 3의 border-radius 축약형은 왼쪽 위에서 시계 방향으로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서입니다. 빠진 값은 반대편 모서리에서 가져오므로 값 하나는 네 모서리 전부, 값 둘은 (왼쪽 위=오른쪽 아래, 오른쪽 위=왼쪽 아래), 값 셋은 왼쪽 아래가 오른쪽 위와 같다는 뜻입니다. 생성기는 입력한 의미와 정확히 같은 형태 중 가장 짧은 것을 씁니다.
슬래시는 가로 반경과 세로 반경을 나눕니다. border-radius: 50px 10px / 10px은 왼쪽 위 모서리에 가로 50px 세로 10px의 타원 곡선을 주고 나머지 모서리는 반경 10px 원으로 만듭니다. 슬래시의 양쪽은 각각 따로 줄여 씁니다. 0은 단위 없는 0으로 출력되며, 어떤 단위에서도 유효합니다.
| 모서리 (왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래) | 출력 | 이유 |
|---|---|---|
| 12, 12, 12, 12 | 12px | 네 모서리가 모두 같음 |
| 16, 40, 16, 40 | 16px 40px | 마주 보는 모서리끼리 같음 |
| 10, 20, 30, 20 | 10px 20px 30px | 오른쪽 위와 왼쪽 아래가 같음 |
| 12, 12, 0, 0 | 12px 12px 0 0 | 짝이 맞지 않아 값 네 개 |
반경이 상자에 맞지 않을 때의 축소
곡선이 겹치면 브라우저는 그대로 그리지 않습니다. 명세는 네 변 각각에 대해 변의 길이를 그 변의 두 반경 합으로 나눈 값 중 가장 작은 것을 계수 f로 삼고, f가 1보다 작으면 상자의 모든 반경에 f를 곱합니다. 높이가 100px인 상자에서 왼쪽 위와 왼쪽 아래에 200px를 주면 왼쪽 변의 합이 400px이므로 f = 100 / 400 = 0.25가 되어 반경은 각각 50px로 그려집니다.
알약이 사실상 큰 반경일 뿐인 이유이자, 짧은 변의 절반을 넘는 값이 눈에 보이는 변화를 주지 못하는 이유입니다. 도구는 이 계수를 겹침 축소 비율로 보여 주고 100% 아래로 내려가면 경고합니다. 축소가 일어나는 모양은 입력한 숫자와 더 이상 일치하지 않기 때문입니다.
퍼센트와 타원
퍼센트 반경은 상자를 기준으로 합니다. 가로 반경은 너비의 비율, 세로 반경은 높이의 비율입니다. 그래서 340 x 220 상자의 border-radius: 50%는 반경 170px와 110px의 타원이고, 같은 값이 정사각형에서는 원입니다. 이 도구가 단위를 바꿀 때 미리보기 상자 크기로 변환하는 이유도 같습니다. 너비 340px 상자에서 20px는 가로 방향으로 약 5.9%입니다.
30% 70% 70% 30% / 30% 30% 70% 70% 같은 블롭이 가능한 것은 모서리마다 가로·세로 반경이 달라서 곡선이 원의 4분의 1이 아니라 타원의 4분의 1이 되기 때문입니다.
실제 예시
왼쪽 위 16, 오른쪽 위 40, 오른쪽 아래 16, 왼쪽 아래 40 (px)border-radius: 16px 40px;마주 보는 모서리가 같아서 값 두 개로 충분합니다.
왼쪽 위 12, 오른쪽 위 12, 오른쪽 아래 0, 왼쪽 아래 0 (px)border-radius: 12px 12px 0 0;아래 패널에 붙는 탭이나 드롭다운 머리글에 흔히 씁니다.
모든 모서리 50 (%)border-radius: 50%;타원 켬, % 단위: 왼쪽 위 30/30, 오른쪽 위 70/30, 오른쪽 아래 70/70, 왼쪽 아래 30/70border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;각 모서리의 가로 반경은 너비의, 세로 반경은 높이의 30% 또는 70%입니다.
타원 켬, % 단위: 왼쪽 위 60/30, 오른쪽 위 20/30, 오른쪽 아래 60/30, 왼쪽 아래 20/30border-radius: 60% 20% / 30%;슬래시 양쪽이 각각 따로 줄어듭니다. 세로 반경은 모두 같아 값 하나입니다.
왼쪽 위 201 (px)Radius values must be between 0 and 200음수도 같은 오류가 나오며, % 단위에서는 한계가 100입니다.
자주 하는 실수
순서를 위, 오른쪽, 아래, 왼쪽으로 읽음
그 순서는
margin과padding의 것입니다.border-radius는 모서리 기준으로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순입니다. 변의 순서로 착각하면 왼쪽 아래용 값이 엉뚱한 모서리에 적용될 수 있습니다.상자보다 큰 반경
상자 변의 절반보다 큰 반경은 거부되지 않고 줄어들어 그려집니다. 그래서 100px 정사각형에서 500px와 50px가 똑같이 보일 수 있습니다. 겹침 축소 비율 표시가 이 상황을 알려 줍니다.
직사각형에서 퍼센트는 원이 아님
300 x 100 상자의
50%는 알약이 아니라 타원입니다. 크기와 상관없이 끝이 둥근 알약이 필요하면9999px처럼 큰 픽셀 값을 쓰고 브라우저가 줄여 그리게 하세요.둥근 모서리가 자식을 자르지 않음
border-radius는 테두리 상자를 둥글게 할 뿐이라, 부모에overflow: hidden이 없거나 자식에 별도 반경이 없으면 이미지 같은 자식의 모서리는 각진 채로 보입니다.표와 병합된 테두리
border-collapse: collapse인<table>에서는 border-radius가 무시됩니다.border-collapse: separate를 쓰거나 표를 감싼 요소를 둥글게 하세요.
자주 묻는 질문
border-radius 값 네 개는 어떤 순서인가요?
왼쪽 위에서 시계 방향으로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래입니다. 값이 네 개보다 적으면 빠진 값을 반대편 모서리에서 가져오며, 생성기는 입력한 의미를 그대로 담는 가장 짧은 형태를 고릅니다.
완벽한 원은 어떻게 만드나요?
정사각형 상자에서 50%를 쓰는 원 예제를 고르세요. 픽셀이라면 변의 절반 이상인 어떤 값이든 브라우저가 맞춰 줄여 그리므로 원이 됩니다.
알약 모양 버튼은 어떻게 만드나요?
알약 예제를 고르면 모든 모서리가 미리보기 높이의 절반(px)으로 설정됩니다. 높이가 달라지는 버튼이라면 9999px처럼 아주 큰 값을 직접 쓰세요. 어느 쪽이든 양 끝이 반원이 됩니다.
border-radius의 슬래시는 무슨 뜻인가요?
슬래시 앞은 가로 반경, 뒤는 세로 반경입니다. 타원 모서리를 켜면 모서리마다 둘을 따로 줄 수 있고, 생성기는 가로와 세로가 다른 모서리가 하나라도 있을 때만 슬래시를 출력합니다.
큰 반경이 더 이상 모양을 바꾸지 않는 이유는 무엇인가요?
인접한 반경이 겹치게 되면 브라우저가 모든 반경에 같은 계수를 곱해 곡선이 딱 맞게 줄입니다. 값을 더 키워도 눈에 보이는 변화가 없고 겹침 축소 비율은 100% 아래로 내려갑니다.
픽셀과 퍼센트 중 무엇을 써야 하나요?
픽셀은 상자 크기와 관계없이 곡선이 같아 버튼과 카드에 알맞고, 퍼센트는 상자를 따라가므로 아바타, 블롭, 크기가 바뀌어도 비율을 유지해야 하는 요소에 알맞습니다.
위쪽 모서리만 둥글게 하려면 어떻게 하나요?
왼쪽 위와 오른쪽 위에 원하는 반경을, 아래 두 모서리에 0을 주거나 탭 예제를 고르세요. 결과는 12px 12px 0 0입니다.
입력한 값이 서버로 올라가나요?
아니요. 모양은 브라우저 안에서 계산되며 서버로 전송되지 않습니다.
마지막 업데이트: