이 도구가 하는 일
모서리 둥글기 생성기로 둥근 모서리를 시각적으로 다듬고 가장 짧은 CSS를 복사할 수 있습니다. 모든 모서리에 같은 반경을 주거나 모서리마다 따로 설정할 수 있고, 타원형 모서리를 켜면 모서리마다 가로와 세로 반경을 따로 지정할 수 있으며 드래그하는 대로 미리보기가 바뀝니다. px, %, rem, em을 지원하고 기존 border-radius 값을 붙여넣어 편집할 수도 있습니다. 모든 작업은 브라우저에서 실행됩니다.
사용 방법
- 프리셋에서 시작하거나 예시 모양을 그대로 둡니다.
- 단위를 고릅니다. 단위를 바꾸면 현재 값이 변환됩니다(rem과 em은 16px, %는 미리보기 상자 기준).
- 모든 모서리 같게를 켜면 슬라이더 하나로, 끄면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래를 따로 조정합니다.
- 타원형 모서리를 켜면 모서리마다 가로와 세로 슬라이더가 생깁니다.
- 너비와 높이로 미리보기 크기를 바꾼 뒤 CSS 카드에서 코드를 복사합니다. 네 개의 개별 속성이 필요하면 롱핸드 출력을 켜세요.
예시
.avatar { border-radius: 50%; }
.tab { border-radius: 12px 12px 0 0; }
.blob { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }알아 두면 좋은 점
- 가장 짧은 형태. 같은 값은 합쳐서 출력됩니다. 네 모서리가 같으면 값 하나가 되고, 모든 모서리가 원형이면 슬래시 부분이 생략됩니다.
- 백분율은 상자를 따릅니다. 가로 백분율은 요소의 너비, 세로 백분율은 높이를 기준으로 하므로 직사각형에 50%를 주면 원이 아니라 타원이 됩니다.
- 맞지 않는 반경은 브라우저가 함께 줄입니다. 그래서 큰 px 값으로 깔끔한 알약 모양이 됩니다.
- 자식 요소와 넘침. 둥근 모서리는 배경과 테두리를 자르지만 자식 콘텐츠는 자르지 않습니다. 상자 안 이미지를 자르려면 overflow: hidden을 추가하세요.
자주 묻는 질문
› border-radius의 슬래시는 무슨 뜻인가요?
슬래시 앞은 가로 반경, 뒤는 세로 반경입니다. 둘이 다르면 모서리가 원이 아니라 타원의 4분의 1이 됩니다. 예를 들어 50% / 30%는 50%보다 납작한 곡선을 만듭니다.
› 네 모서리는 어떤 순서로 쓰나요?
왼쪽 위부터 시계 방향으로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래입니다. 값이 네 개보다 적으면 CSS가 반복합니다. 두 값은 왼쪽 위/오른쪽 아래와 오른쪽 위/왼쪽 아래, 세 값은 왼쪽 위, 오른쪽 위/왼쪽 아래, 오른쪽 아래를 설정합니다.
› 원이나 알약 모양은 어떻게 만드나요?
border-radius: 50%는 정사각형을 원으로, 직사각형을 타원으로 만듭니다. 너비와 상관없이 양 끝이 반원인 알약 모양은 9999px처럼 아주 큰 길이를 쓰세요. 맞지 않는 반경은 브라우저가 줄여 주므로 양 끝이 완벽한 반원으로 남습니다.
› 블롭 모양은 어떻게 만드나요?
블롭은 가로 네 개, 세로 네 개, 모두 여덟 개의 서로 다른 백분율을 씁니다. 예: 30% 70% 70% 30% / 30% 30% 70% 70%. 블롭 프리셋을 고르고 타원형 모서리를 켠 뒤 각 모서리 슬라이더로 모양을 다듬으세요.