CSS 테두리 반경 생성기
브라우저 처리CSS 테두리 반경 생성기는 요소의 네 모서리 둥글기(border-radius)를 슬라이더로 조절하면서 그 결과를 실시간 미리보기와 CSS 코드로 보여 주는 도구입니다.
도구 실행입력 후 결과 확인
CSS 테두리 반경 생성기 샘플 실행
브라우저 처리
CSS 테두리 반경 생성기는 요소의 네 모서리 둥글기(border-radius)를 슬라이더로 조절하면서 그 결과를 실시간 미리보기와 CSS 코드로 보여 주는 도구입니다. 네 모서리를 한꺼번에 같은 값으로 둥글릴 수도 있고, 모서리마다 다른 값을 주어 비대칭 형태를 만들 수도 있습니다.
샘플 결과
CSS 테두리 반경 생성기 샘플 결과 입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.
CSS 테두리 반경 생성기 사용 안내
CSS 테두리 반경 생성기는 요소의 네 모서리 둥글기(border-radius)를 슬라이더로 조절하면서 그 결과를 실시간 미리보기와 CSS 코드로 보여 주는 도구입니다. 네 모서리를 한꺼번에 같은 값으로 둥글릴 수도 있고, 모서리마다 다른 값을 주어 비대칭 형태를 만들 수도 있습니다.
border-radius는 값 하나만 주면 단순한 둥근 사각형이 되지만, 모서리별로 가로·세로 반경을 따로 지정하면 잎사귀 모양이나 물방울 같은 곡선 형태까지 표현할 수 있습니다. 다만 그 문법은 손으로 적기 까다로워, 직접 숫자를 바꿔 가며 모양을 확인하는 편이 훨씬 빠릅니다.
사용 방법
- 네 모서리를 동일하게 둥글리려면 전체 반경 슬라이더 하나를 움직여 기본 둥근 사각형을 만듭니다.
- 모서리별로 다른 형태가 필요하면 좌상·우상·우하·좌하 각각의 값을 따로 조절합니다.
- 필요하면 가로 반경과 세로 반경을 다르게 주어 타원형 곡선이나 비대칭 모양을 만듭니다.
- 미리보기 도형이 원하는 형태가 됐는지 확인합니다.
이럴 때 사용하세요
- 네 모서리를 동일하게 둥글리려면 전체 반경 슬라이더 하나를 움직여 기본 둥근 사각형을 만듭니다. 모서리별로 다른 형태가 필요하면 좌상·우상·우하·좌하 각각의 값을 따로 조절합니다. 필요하면 가로 반경과 세로 반경을 다르게 주어 타원형 곡선이나 비대칭 모양을 만듭니다. 미리보기 도형이 원하는 형태가 됐는지 확인합니다. 생성된 border-radius CSS 코드를 복사해 해당 요소의 스타일에 붙여 넣습니다.
- CSS 테두리 반경 생성기: 개발 중 입력 형식과 변환·검사 결과를 작은 샘플로 대조할 때 적합합니다.
- CSS 테두리 반경 생성기 결과를 확인한 뒤 색상 코드 변환 또는 컬러 믹서에서 다음 작업을 이어갈 수 있습니다.
문제가 생겼을 때
CSS 테두리 반경 생성기: 미리보기와 실제 화면이 다름
부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
CSS 테두리 반경 생성기: 입력 형식을 인식하지 못하거나 오류 위치가 달라 보임
CSS 테두리 반경 생성기에서 가장 작은 샘플부터 괄호, 따옴표, 구분자와 인코딩을 순서대로 확인하세요.
활용 팁
- 대각선으로 마주 보는 두 모서리만 크게 둥글리면 한쪽으로 흐르는 듯한 말풍선이나 카드 디자인을 만들 수 있습니다.
- 가로 반경과 세로 반경을 크게 다르게 설정하면 단순 원형이 아닌 잎사귀·물방울 형태가 나와 장식 요소로 활용하기 좋습니다.
- 프로필 이미지를 완전한 원으로 만들고 싶다면 정사각형 요소에 50%에 해당하는 값을 주면 되며, 이 도구에서 그 모양을 미리 확인할 수 있습니다.