◖
무료 CSS 테두리 반지름 생성기
각 모서리를 독립적으로 제어하여 둥근 모서리를 시각적으로 디자인합니다. 유기적인 블롭 형태를 위한 타원형 X/Y 구문을 지원합니다.
한 번 로드하면 오프라인에서도 작동
border-radius: 20px 20px 20px 20px;
단위
주요 용도
- 유기적 블롭 모양타원형 X/Y 구문을 사용하여 히어로 섹션과 삽화를 위한 고유한 블롭 모양을 만듭니다.
- 카드 및 컨테이너 모서리현대적 UI 설계에서 카드, 컨테이너 및 패널의 표준 둥근 모서리.
- 아바타 및 프로필 사진 모양프로필 사진의 올바른 모서리 스타일을 만듭니다: 원형, squircle 또는 둥근 정사각형.
- 필, 태그 및 배지9999 사전 설정으로 완벽하게 둥근 필 버튼, 태그 및 배지를 구축합니다.
- 비대칭 모서리 설계모서리 간에 반지름을 혼합하여 독특하고 브랜드가 인식할 수 있는 카드 및 버튼 모양을 만듭니다.
사용 방법
border-radius 생성기는 전적으로 브라우저에서 실행됩니다. 서버, 라이브러리, 업로드가 없습니다. React 상태와 useMemo로 CSS border-radius 값 문자열을 JavaScript에서 직접 만들고, 이를 실제 div 요소에 인라인 스타일로 적용해 브라우저 자체 CSS 엔진이 모양을 실시간으로 렌더링합니다.
- 1슬라이더가 상태를 기록각 범위 입력은 8개의 숫자 상태 변수 중 하나에 값을 씁니다. 네 모서리의 가로 반지름 4개와 타원 모드용 세로 반지름 4개입니다. 통합 모드는 setAll 헬퍼로 모든 값을 한 번에 동기화해 8개를 하나의 슬라이더로 묶습니다.
- 2useMemo가 CSS 값을 조합useMemo 훅은 모서리 값, 단위(px 또는 %), 타원 토글이 바뀔 때마다 border-radius 문자열을 다시 계산합니다. 표준 모드에서는 네 값 축약형을 만들고, 타원 모드에서는 슬래시 구분자를 추가해 8개 값 전체 구문을 만듭니다. 예: 32px 20px 20px 32px / 20px 32px 20px 32px.
- 3브라우저 CSS 엔진이 미리보기를 렌더링계산된 문자열은 일반 div 요소에 인라인 borderRadius 스타일로 설정됩니다. 모든 렌더링은 브라우저의 레이아웃 엔진이 담당하며, 캔버스, SVG, 서드파티 그리기 코드는 없습니다.
- 4Clipboard API로 결과 복사복사를 클릭하면 선택한 형식에 따라 CSS 선언(border-radius: ...;) 또는 동등한 Tailwind 임의 값 클래스(rounded-[...])로 navigator.clipboard.writeText를 호출합니다.