Border Radius 생성기

정사각형 요소를 완벽한 원으로 변환합니다. 진정한 원을 만들려면 요소의 너비와 높이가 같아야 합니다. 예를 들어 `width: 100px; height: 100px; border-radius: 50%`처럼 설정합니다. 50% 반경이 네 면 모두에서 중간에서 만나 완벽한 곡선을 만들어냅니다. 정사각형이 아닌 요소에서는 50%가 원 대신 타원을 만듭니다. 요소의 크기에 따라 가로로 더 넓거나 세로로 더 길게 됩니다. 이것이 CSS에서 원형 아바타 이미지, 둥근 버튼, 아이콘 컨테이너를 만드는 가장 일반적인 방법입니다.

버튼이나 뱃지 같은 정사각형이 아닌 요소에 `border-radius: 9999px`(또는 100px 같은 매우 큰 값)를 사용하십시오. 브라우저가 자동으로 반경을 요소의 짧은 치수의 절반으로 줄여, 짧은 면은 완벽한 반원이 되고 긴 면은 직선으로 유지됩니다. 이것이 현대 디자인 시스템에서 볼 수 있는 고전적인 알약 모양 CTA 버튼을 만들어냅니다. `9999px` 트릭은 요소 크기에 관계없이 작동합니다. 높이의 절반을 수동으로 계산할 필요가 없습니다. 이 생성기의 알약(Pill) 프리셋이 이 패턴을 즉시 적용합니다.

픽셀 값은 절대적입니다. `12px` 반경은 요소 크기에 관계없이 12픽셀로 유지됩니다. 요소가 커지거나 작아져도 모서리 크기는 고정됩니다. 퍼센트 값은 상대적입니다. `50%`는 항상 각 면의 정확히 중간 지점까지 곡선을 그려, 요소와 함께 크기가 조정되는 비례적인 도형을 만들어냅니다. 요소와 함께 크기가 조정되어야 하는 원형이나 알약 같은 도형에는 퍼센트(`50%`)를 사용하십시오. 콘텐츠에 관계없이 일관되고 디자인 시스템에서 정의된 모서리 크기를 원하는 카드, 버튼, 입력창 같은 UI 컴포넌트에는 픽셀을 사용하십시오.

표준 `border-radius`는 모서리를 바깥쪽(볼록)으로만 곡선 지을 수 있습니다. 티켓, 탭, 말풍선에 사용되는 안쪽으로 파이는 오목 모서리의 경우 `border-radius` 단독으로는 불가능합니다. 가장 일반적인 기법은 radial-gradient 마스크입니다. `mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`처럼 안쪽으로 파고 싶은 각 모서리에 반복합니다. 또 다른 방법은 페이지 배경색과 자체 바깥쪽 `border-radius`를 가진 위치 지정 가상 요소(`::before`)를 모서리 위에 레이어로 올려 오목한 도형을 만드는 것입니다. 티켓 절취선 가장자리의 경우 한 면을 따라 반복되는 radial-gradient 마스크가 스캘럽 천공 효과를 만들어냅니다. 따라서 '인버트 border-radius'는 실제로 border-radius 값이 아닌 마스킹 기법입니다.

개별 모서리 속성을 사용하십시오. `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius`, `border-bottom-left-radius`가 있습니다. 예를 들어 `border-bottom-right-radius: 24px`는 오른쪽 하단 모서리만 둥글게 하고 나머지 세 개는 날카롭게 유지합니다. 자유롭게 조합할 수 있습니다. `border-top-left-radius: 16px; border-bottom-right-radius: 16px`는 대각선으로 둥근 도형을 만듭니다. 단축 속성에서 두 값은 반대 모서리 쌍을 설정합니다. `border-radius: 16px 0`은 왼쪽 상단과 오른쪽 하단 모서리를 둥글게 하고 오른쪽 상단과 왼쪽 하단은 날카롭게 유지합니다.

왼쪽 상단부터 시계 방향으로: 왼쪽 상단 → 오른쪽 상단 → 오른쪽 하단 → 왼쪽 하단입니다. 따라서 `border-radius: 16px 8px 0 8px`는 왼쪽 상단 16px, 오른쪽 상단 8px, 오른쪽 하단 0, 왼쪽 하단 8px를 적용합니다. 이는 `margin`, `padding`, `border-width`에서 사용되는 표준 CSS 단축 속성 방향과 일치합니다. 두 값의 경우 첫 번째는 왼쪽 상단과 오른쪽 하단에, 두 번째는 오른쪽 상단과 왼쪽 하단에 적용됩니다. 세 값의 경우 두 번째가 오른쪽 상단과 왼쪽 하단 모두에 적용됩니다. 한 값은 네 모서리 모두에 균일하게 적용됩니다.

네, `<img>` 요소에 직접 `border-radius`를 적용하십시오. `img { border-radius: 50%; width: 100px; height: 100px; }`처럼 하면 원형 아바타가 됩니다. 또는 이미지를 `overflow: hidden`이 있는 `<div>`로 감싸고 래퍼에 border-radius를 적용하면 레이아웃 제어가 더 쉬워집니다. 이 도구의 이미지 업로드 기능을 사용하여 CSS를 복사하기 전에 실제 사진에서 반경이 어떻게 보이는지 미리 확인하십시오. 아바타 크롭, 미디어 카드 썸네일, 갤러리 레이아웃처럼 정확한 클리핑 도형이 디자인에 영향을 미치는 경우에 특히 유용합니다.

세 모서리를 큰 값으로 설정하고 하나는 0으로 남겨두십시오. `border-radius: 50% 50% 50% 0`. `transform: rotate(-45deg)`와 결합하면 지도 핀의 고전적인 물방울 모양이 만들어집니다. 0인 모서리를 바꾸어 물방울의 방향을 조정하십시오. `0 50% 50% 50%`는 왼쪽을 가리키고, `50% 0 50% 50%`는 오른쪽을 가리킵니다. 0인 모서리가 뾰족한 끝을 만들고, 큰 반경의 세 모서리가 둥근 본체를 형성합니다. 위치 마커, 포인터, 일러스트 스타일 UI의 장식적 강조 요소에 유용합니다.

슬래시는 각 모서리의 수평 및 수직 반경을 구분합니다. 구문은 `border-radius: [수평 반경] / [수직 반경]`입니다. 예를 들어 `border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%`는 각 모서리에 비대칭 타원형 곡선이 있는 달걀 모양을 만들어냅니다. 이 도구의 랜덤 블롭 생성기는 이 구문을 사용하여 유기적이고 비대칭적인 도형을 만들어냅니다. 히어로 섹션 배경, 장식용 블롭, 일러스트 스타일 디자인 요소에 인기가 많습니다. 각 모서리는 서로 다른 수평 대 수직 반경 비율을 가질 수 있습니다.

cssmatic.com의 border-radius 도구는 기능적이지만 오래되었습니다. 이미지 업로드, 블롭 생성, 프리셋 라이브러리가 없습니다. css-tricks.com 알마낙은 훌륭한 문서이지만 인터랙티브 생성기가 아닙니다. bennettfeely.com의 clip-path maker는 사용 사례가 겹치지만 border-radius가 아닌 clip-path를 대상으로 합니다. UtiloKit의 생성기는 실시간 미리보기와 이미지 업로드(완전히 클라이언트 사이드 처리), 도형 프리셋(원형, 알약, 카드, 달걀형, 블롭), 8값 슬래시 구문을 사용한 랜덤 블롭 생성, px/% 단위 전환, 세 가지 복사 형식을 제공합니다. 광고 없음, 워터마크 없음, 회원가입 없음, 서버로 전송되는 데이터 없음.

아니요. 이미지는 브라우저의 File API를 통해서만 로드되며 기기를 벗어나지 않습니다. 미리보기 요소는 브라우저 메모리 안에만 유지되는 `createObjectURL()` 호출을 사용하여 로컬에서 이미지를 렌더링합니다. 업로드, 서버 처리, 클라우드 저장소가 없습니다. 동일한 클라이언트 사이드 아키텍처가 모든 기능에 적용됩니다. 슬라이더 입력, CSS 생성, 블롭 랜덤화, 클립보드 복사 모두 초기 페이지 로드 후 네트워크 요청 없이 자바스크립트에서 실행됩니다. 이미지와 디자인 작업은 완전히 비공개로 유지됩니다.

`border-radius`는 CSS 전환과 키프레임 애니메이션을 통해 완전히 애니메이션화할 수 있습니다. `transition: border-radius 0.3s ease`를 사용하여 마우스 오버 시 두 값 사이를 부드럽게 보간하십시오. `@keyframes`를 사용하여 도형 간 연속 모핑을 구현하십시오. `0`에서 `50%`로 애니메이션하면 정사각형이 원으로 변하는 펄스 효과를 만들 수 있습니다. 두 블롭 도형 사이의 모핑(서로 다른 8값 슬래시 값)은 히어로 배경에서 인기 있는 흐르는 유기적 애니메이션을 만들어냅니다. border-radius 애니메이션은 매 프레임마다 리페인트를 유발하므로, 자주 애니메이션되는 요소에는 `will-change: border-radius`를 사용하십시오.

`border-radius`는 순전히 시각적입니다. 요소의 그려진 모양을 클리핑하지만 레이아웃 박스, 마진 영역, 포인터 이벤트 히트 영역은 변경하지 않습니다. 보이지 않는 정사각형 모서리는 여전히 클릭 가능하고 레이아웃 공간을 차지합니다. 이것은 터치 인터페이스에서 중요합니다. 원형 버튼은 여전히 모서리에 정사각형 클릭 가능 영역이 있습니다. 히트 영역이 둥근 모양을 정확히 따라야 한다면 포인터 이벤트도 클리핑하는 `clip-path: circle()`을 사용하십시오. `box-shadow`는 `border-radius`를 올바르게 따르지만, 대부분의 브라우저에서 `outline`은 그렇지 않습니다. 둥근 포커스 링 대안으로 `box-shadow: 0 0 0 3px color`를 사용하십시오.

네. 이 도구는 완전히 반응형이며 모든 최신 모바일 브라우저에서 작동합니다. 아이폰에서는 아무것도 설치하지 않고 Safari나 Chrome에서 사용하십시오. 안드로이드에서는 Chrome, Firefox, Edge 모두 작동합니다. 슬라이더는 적절한 크기의 드래그 핸들로 터치 친화적입니다. 이미지 업로드는 모바일에서 네이티브 파일 선택기를 사용하여 카메라 롤이나 파일 앱에서 선택할 수 있습니다. CSS를 클립보드에 복사하는 기능은 모든 최신 모바일 브라우저에서 지원하는 표준 웹 클립보드 API를 통해 작동합니다. 전체 도구가 클라이언트 사이드에서 실행되므로 앱 다운로드, 계정, 서버로 전송되는 데이터가 없습니다.