도구 소개
모서리 반경 생성기는 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 모서리를 조절합니다. ‘모서리 연동’을 켜면 하나의 값을 바꿀 때 나머지 세 모서리도 동기화되어 동일한 반경을 빠르게 지정할 수 있습니다.
사용 방법
- 반경 단위를 선택하고 네 모서리에 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의 순서와 축약 규칙을 배웁니다.
개인정보 안내
입력 내용과 결과는 브라우저 안에서만 처리되며 업로드되거나 자동으로 저장되지 않습니다. 보관할 결과는 복사해서 저장하세요.
FAQ
네 모서리는 어떤 순서인가요?
왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래의 시계 방향 순서입니다.
모서리 연동은 어떤 기능인가요?
켜면 한 모서리를 변경할 때 같은 값이 나머지 세 모서리에도 적용됩니다.
출력값이 한 개나 두 개뿐인 이유는 무엇인가요?
동일한 모서리 값은 표준 CSS 규칙에 따라 축약할 수 있습니다. 짧은 표기와 네 값을 모두 쓰는 표기는 같은 효과를 냅니다.
아주 큰 반경이 입력한 크기 그대로 표시되지 않는 이유는 무엇인가요?
이웃한 모서리 반경의 합이 박스 크기를 넘으면 브라우저가 겹침을 막기 위해 CSS 규칙에 따라 모든 반경을 비례 축소합니다.