모서리 반경 생성기
CSS border-radius 속성을 만듭니다
입력 및 옵션
빠른 프리셋 및 예시
브라우저에서 실행됩니다. 입력한 내용은 이 기기에만 남습니다.
결과
결과를 보려면 값을 입력하세요.
모서리 반경 생성기 소개
무료 CSS 모서리 반경 생성기로 모든 HTML 요소의 둥근 모서리를 시각적으로 완벽하게 조절할 수 있습니다. 각 모서리를 개별로 조정하거나 모두 연결하여 한 번에 조정하고, 여러 단위(px, %, em, rem) 중에서 선택하며, 실시간 미리보기 패널에서 결과를 바로 확인하세요.
둥근 모서리는 현대 웹 디자인의 기본 요소입니다. 카드와 입력란의 은은한 4px 모서리부터 아바타용 50% 원형까지, border-radius 속성은 사용자가 인터페이스를 받아들이는 느낌을 좌우합니다. 이 도구를 쓰면 감에 의존하거나 브라우저를 계속 새로 고치지 않고도 필요한 값을 쉽게 찾을 수 있습니다.
사각형, 원, 알약형, 물방울형, 유기적 형태 등 10가지 프리셋 도형과 창의적인 탐색을 위한 무작위 생성기가 포함되어 있습니다. 결과는 CSS 단축 속성, 모서리별 개별 속성, 바로 쓸 수 있는 CSS 클래스, 근사치인 Tailwind CSS 표기 등 여러 형식으로 제공됩니다.
주요 기능
- 각 모서리 개별 조절: 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래
- 네 모서리를 동일한 반경으로 한 번에 조정하는 모서리 연결 토글
- 반응형 디자인을 위한 네 가지 단위: 픽셀(px), 백분율(%), em, rem
- 요소 크기(100-300px) 조절과 사용자 지정 색상 선택이 가능한 실시간 미리보기
- 10가지 프리셋 도형: 사각형, 둥근 사각형, 원, 알약형, 위쪽 둥글게, 아래쪽 둥글게, 왼쪽 둥글게, 오른쪽 둥글게, 물방울형, 유기적 형태
- 각 모서리의 정확한 반경을 보여 주는 시각적 모서리 값 표시
- 아이디어를 얻고 실험할 수 있는 무작위 반경 생성기
- 여러 CSS 출력 형식: 단축 속성, 개별 속성, CSS 클래스, Tailwind CSS 근사 표기
- 클릭 한 번으로 클립보드에 복사하여 프로젝트에 바로 사용
- 직관적으로 값을 조정할 수 있는 범위 표시가 있는 슬라이더 컨트롤
모서리 반경 생성기 사용 방법
- 단위 선택: 고정 크기에는 px, 반응형 비율에는 %, 글꼴 크기 기준에는 em/rem을 선택합니다.
- 모서리 값 조정: 슬라이더로 각 모서리의 반경을 개별 설정하거나, "모든 모서리 연결"을 켜서 균일하게 둥글게 만듭니다.
- 프리셋 도형 사용: 원, 알약형, 물방울형 등 10가지 프리셋 도형 중 하나를 클릭하면 자주 쓰는 설정이 바로 적용됩니다.
- 결과 미리보기: 크기와 색상을 조절할 수 있는 실시간 미리보기로 border radius가 어떻게 보일지 정확히 확인합니다.
- CSS 복사: 복사를 클릭하여 border-radius CSS 코드를 가져가거나, 대체 형식 영역에서 개별 속성 또는 Tailwind 클래스를 사용합니다.
활용 사례
- 버튼 스타일링: 알약형 버튼, 은은하게 둥근 행동 유도 버튼, 완전한 원형 아이콘 버튼을 만들 수 있습니다.
- 카드 컴포넌트: 디자인 시스템의 카드, 모달, 대화상자에 일관된 둥근 모서리를 적용합니다.
- 아바타 이미지: 정사각형 이미지에 50% border-radius를 적용하면 완벽한 원형 사용자 아바타와 프로필 사진을 만들 수 있습니다.
- 입력란: 양식 입력란, 텍스트 영역, 선택 드롭다운에 부드러운 둥근 모서리를 주어 현대적인 느낌을 냅니다.
- 내비게이션 요소: 탭, 배지, 태그, 내비게이션 항목에 알맞은 둥근 모서리를 적용합니다.
- 창의적인 도형: 비대칭 모서리 값을 조합하여 유기적인 얼룩 모양, 물방울형, 독특한 장식 요소를 만듭니다.
- 툴팁과 팝오버 디자인: 툴팁, 팝오버, 드롭다운 메뉴에 정밀한 둥근 모서리를 적용합니다.
- 반응형 디자인 토큰: em 또는 rem 단위로 프로젝트 전체에 일관된 border-radius 값을 정합니다.
자주 묻는 질문
이 도구는 무료인가요?
네, 모서리 반경 생성기는 제한 없이 완전 무료입니다. 회원 가입이나 결제 없이 원하는 만큼 사용할 수 있습니다.
내 데이터는 안전한가요?
물론입니다. 이 도구는 전적으로 브라우저에서 실행됩니다. 어떤 데이터도 서버로 전송되지 않으므로 설정과 생성된 CSS 코드는 기기 안에서만 유지됩니다.
border-radius에서 px와 %는 어떻게 다른가요?
픽셀(px) 값은 요소 크기와 관계없이 고정된 반경을 만듭니다. 백분율(%) 값은 요소의 크기에 비례하므로 반응형으로 동작합니다. 예를 들어 정사각형 요소에 50%를 적용하면 완벽한 원이 됩니다.
CSS로 완벽한 원을 만들려면 어떻게 하나요?
너비와 높이가 같은 요소에 border-radius를 50%로 설정합니다. 이 도구의 원 프리셋이 바로 이 설정을 적용합니다.
border-radius는 모든 브라우저에서 지원되나요?
네, border-radius CSS 속성은 Chrome, Firefox, Safari, Edge, Opera를 포함한 모든 최신 브라우저에서 완벽하게 지원됩니다. 벤더 접두사는 필요하지 않습니다.
팁과 모범 사례
- 일관된 값 사용: 시각적 일관성을 위해 디자인 시스템에 2-3개의 표준 border-radius 값(예: 4px, 8px, 16px)을 정해 두세요.
- 원에는 백분율 사용: 정사각형 요소에 50%를 설정하면 크기가 바뀌어도 자동으로 비율이 유지되는 완벽한 원이 됩니다.
- 양식에는 은은하게: 입력란과 양식 요소에는 2-8px 정도의 작은 값이 깔끔하고 전문적인 느낌을 유지하는 데 가장 좋습니다.
- 비대칭 모서리 시도: 모서리마다 값을 다르게 주면 독특한 도형이 만들어져 장식 요소에 개성을 더할 수 있습니다.
- 반응형 단위 고려: em 또는 rem을 사용하면 border-radius 값이 글꼴 크기에 비례하여 조정됩니다.
- 콘텐츠와 함께 테스트: 특히 다양한 뷰포트 크기에서, 요소 안에 실제 콘텐츠를 넣었을 때 둥근 모서리가 어떻게 보이는지 항상 확인하세요.