CSS 모서리 반경 생성기
네 모서리의 반경을 따로 조절하고 border-radius CSS를 생성하세요.
네 모서리의 반경을 따로 입력해 border-radius 선언을 만듭니다. 모서리마다 모양이 다른 카드나 배지에 씁니다.
사용 순서
- 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 반경을 px 단위로 입력합니다.
- 미리보기 상자에서 모서리 모양을 확인합니다. 샘플 버튼으로 예시 값을 채울 수 있습니다.
- 결과 복사를 눌러 border-radius 선언을 가져갑니다.
예시
값 8, 24, 48, 0을 입력하면 border-radius: 8px 24px 48px 0px; 선언이 나옵니다.
한계
값은 모두 px 단위로만 출력합니다. 퍼센트와 rem 값은 입력할 수 없습니다. 가로와 세로 반경을 따로 주는 타원형 구문(슬래시 표기)은 만들 수 없습니다. 네 칸 중 빈 칸이 있으면 결과가 나오지 않습니다.
보안 주의
반경의 합이 상자의 가로나 세로보다 커지면 브라우저가 네 값을 같은 비율로 줄여 맞춥니다. 입력한 숫자와 실제 화면이 다르게 보일 수 있으니 실제 요소 크기에서 확인하세요.
배경 지식
border-radius는 요소의 모서리를 둥글게 깎는 CSS 속성입니다. 값을 한 개만 쓰면 네 모서리가 같아지고, 네 개를 쓰면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 적용됩니다. 시계 방향 순서를 기억해 두면 값을 헷갈리지 않습니다. 두 개를 쓰면 왼쪽 위와 오른쪽 아래가 같고 오른쪽 위와 왼쪽 아래가 같아지며, 세 개를 쓰면 왼쪽 아래는 오른쪽 위와 같아집니다.
이 도구는 네 값을 모두 px 단위로 출력합니다. 반경을 0으로 두면 그 모서리는 직각으로 남으므로, 한쪽 모서리만 둥근 탭이나 말풍선 모양을 만들 때 나머지 모서리를 0으로 두면 됩니다. 값이 상자 크기보다 커지면 브라우저가 비율을 맞춰 줄이므로, 큰 값을 넣을 때는 상자 크기를 함께 생각해야 합니다.
같은 둥근 정도를 여러 곳에서 쓰는 디자인 시스템에서는 반경 값을 CSS 변수 하나로 묶어 두는 편이 좋습니다. 디자인 기준이 바뀔 때 변수 한 곳만 고치면 모든 카드와 버튼이 함께 바뀌기 때문입니다. 반경을 px 대신 rem으로 바꿔 쓰면 글꼴 크기 설정에 따라 모서리도 함께 커지므로 접근성 측면에서도 도움이 됩니다.
자주 묻는 질문
모서리 값을 하나만 쓰면 결과는 어떻게 나오나요?
이 도구는 항상 네 값을 출력합니다. 네 칸에 같은 값 8을 넣으면 border-radius: 8px 8px 8px 8px; 형태로 나옵니다. 브라우저에서는 두 형태가 같은 결과입니다.
정사각형을 원으로 만들려면 값을 얼마로 넣어야 하나요?
상자의 한 변 길이의 절반 이상을 반경으로 주면 원이 됩니다. 예를 들어 100px 정사각형은 네 모서리를 50px 이상으로 주면 완전한 원이 되고, 그보다 작으면 모서리가 둥근 사각형으로 남습니다.
퍼센트 단위가 필요하면 어떻게 하나요?
이 도구는 px만 생성하므로, 결과 선언에서 px를 %로 바꿔 직접 쓸 수 있습니다. 다만 퍼센트 반경은 가로와 세로 기준이 달라 타원형이 되므로, 의도한 모양인지 실제 화면에서 확인해야 합니다.