도구 소개
모서리 반경 생성기는 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 모서리를 조절합니다. ‘모서리 연동’을 켜면 하나의 값을 바꿀 때 나머지 세 모서리도 동기화되어 동일한 반경을 빠르게 지정할 수 있습니다.
사용 방법
- 반경 단위를 선택하고 네 모서리에 0 이상의 값을 입력하세요.
- 모든 모서리를 같게 하려면 ‘모서리 연동’을 켜세요.
- 미리보기 박스의 모양이 바뀌는 모습을 확인하세요.
- CSS를 복사하거나 설정을 초기화한 뒤 다른 모양을 만들어 보세요.
사용 예제
- 10, 20, 30, 40px는 서로 독립적인 네 모서리 반경을 뜻합니다.
- 네 모서리가 모두 20px이면 border-radius: 20px로 출력합니다.
- 왼쪽 위·오른쪽 아래가 10px, 오른쪽 위·왼쪽 아래가 20px이면 10px 20px로 축약합니다.
border-radius: 10px 20px 30px 40px;
border-radius: 20px;작동 원리 및 CSS 설명
border-radius의 네 값은 왼쪽 위에서 시작해 시계 방향으로 적용됩니다. 네 값이 같으면 한 값으로, 대각선의 값이 같으면 두 값으로 축약할 수 있습니다. 다른 조합도 조건에 따라 CSS 축약형을 사용할 수 있습니다. 지나치게 큰 반경은 브라우저가 CSS 규칙에 따라 그릴 수 있는 크기로 조절합니다.
주요 용도
- 카드와 버튼의 모서리 반경을 통일합니다.
- 비대칭 모서리를 가진 장식용 컨테이너를 만듭니다.
- border-radius의 순서와 축약 규칙을 배웁니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
네 모서리는 어떤 순서인가요?
왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 시계 방향 순서입니다.
모서리 연동은 어떤 기능인가요?
켜면 한 모서리를 변경할 때 같은 값이 나머지 세 모서리에도 적용됩니다.
출력값이 한 개나 두 개뿐인 이유는 무엇인가요?
동일한 모서리 값은 표준 CSS 규칙에 따라 축약할 수 있습니다. 짧은 표기와 네 값을 모두 쓰는 표기는 같은 효과를 냅니다.
아주 큰 반경이 입력한 크기 그대로 표시되지 않는 이유는 무엇인가요?
이웃한 모서리 반경의 합이 박스 크기를 넘으면 브라우저가 겹침을 막기 위해 CSS 규칙에 따라 모든 반경을 비례 축소합니다.