보더 레디우스 생성기
무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
border-radius 8값 문법은 무엇인가요?
border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 문법에서 슬래시 앞의 값은 각 모서리의 가로 반경(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래), 뒤의 값은 세로 반경입니다. 각 방향에 다른 값을 지정하면 유기적인 블롭 모양이 만들어집니다.
생성된 CSS는 어떻게 사용하나요?
border-radius 코드 줄을 복사해 원하는 요소의 CSS 규칙에 붙여넣으면 됩니다. 예: .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }. 일반 CSS, Sass, Tailwind 임의 값, 인라인 스타일 모두에서 동작합니다.
블롭 모양은 어디에 활용되나요?
히어로 일러스트, 아바타, 프로필 이미지, 기능 카드, 버튼, 장식 배경 등 현대적인 웹과 앱 디자인에서 널리 사용됩니다.
둥근 모서리는 모든 브라우저에서 동작하나요?
네. border-radius는 Chrome, Firefox, Safari, Edge, 모바일 브라우저를 포함한 모든 최신 브라우저에서 지원되며, 벤더 접두사도 필요 없습니다.
블롭 모양에 애니메이션을 줄 수 있나요?
네. border-radius는 애니메이션 가능한 속성이므로 CSS 트랜지션을 추가하면 모양 사이를 부드럽게 변형할 수 있습니다. 예: .blob { transition: border-radius .8s ease; }.
4값 문법과 8값 문법의 차이는 무엇인가요?
4값 문법은 각 모서리의 가로·세로 반경을 같은 값으로 설정하며, 필이나 원형에는 충분합니다. 8값 문법은 가로와 세로 반경을 따로 지정할 수 있어 비대칭적인 유기적 모양을 만들 수 있습니다.
완벽한 원을 만들려면 어떻게 하나요?
정사각형 요소에서 8개 값을 모두 50%로 설정하거나 단순히 border-radius: 50%를 사용하세요. 원에 가까운 프리셋에서 시작해 조정하는 것도 좋은 방법입니다.
데이터가 서버로 전송되나요?
아니요. 이 생성기는 순수 CSS와 JavaScript만으로 브라우저 안에서 전부 처리됩니다. 드래그하거나 입력하거나 복사한 어떤 것도 서버로 전송되지 않습니다.
정사각형이 아닌 요소에도 사용할 수 있나요?
가능하지만 백분율 반경은 요소 크기에 상대적이므로, 직사각형에서는 타원형 모서리가 되어 정사각형 미리보기와 다르게 보입니다. 생성된 값을 시작점으로 삼아 조절하세요.
보더 레디우스 생성기 사용 방법
8개 값을 가진 border-radius는 일반 둥근 사각형으로는 낼 수 없는 타원 모서리의 유기적인 블롭을 만들어 줍니다. 핸들을 드래그해 형태를 다듬고 완성된 CSS를 바로 복사하세요 — 렌더링은 모두 브라우저에서 실시간으로 이뤄집니다.
- 도형 가장자리에 놓인 8개의 핸들을 끌면 됩니다. 위아래 가장자리의 핸들은 가로 반경을, 좌우의 핸들은 세로 반경을 조절합니다.
- 6개의 프리셋 사각형 중 하나를 클릭해 설계된 블롭에서 출발한 뒤, 가로 반경·세로 반경 숫자 입력칸(모서리마다 하나, 0~100%)으로 다듬으세요.
- 랜덤 버튼을 누르면 클릭 한 번으로 새로운 유기적 형태가 생성되고, 초기화는 기본 형태와 색으로 되돌립니다.
- 도형 색상과 배경색을 골라 목표 팔레트 위에서 블롭을 확인하세요. 변경 사항은 즉시 반영됩니다.
- CSS 복사를 누르면 하단 바에 실시간으로 표시된 border-radius 선언이 복사되어 어떤 요소에든 붙여넣을 수 있습니다.
정사각형 요소에 이 CSS를 적용하고 overflow: hidden을 함께 쓰면 클래식한 블롭이 됩니다. 백분율 단위는 어떤 크기에서도 곡선이 부드럽고, 문법의 슬래시 앞은 가로 반경, 뒤는 세로 반경입니다.
관련 도구
- CSS Border Radius 생성기 시각적 CSS border-radius 생성기. 각 모서리를 독립적으로 조정하고 실시간 미리보기로 CSS 코드를 즉시 복사하세요.
- CSS 그라데이션 생성기 시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
- CSS 박스 섀도 생성기 무료 온라인 CSS box-shadow 생성기. 조정 가능한 오프셋, 블러, 확산, 색상, 인셋으로 아름다운 그림자를 시각적으로 생성. 라이브 미리보기 및 즉시 코드 복사.
- 색상 팔레트 생성기 무료 온라인 생성기로 아름답고 조화로운 색상 팔레트를 즉시 만드세요. 단색, 유사색, 보색, 삼색, 분할 보색, 사색 모드를 지원합니다. HSL 슬라이더로 색상을 조정하고, 즐겨찾기를 잠그고, CSS, Tailwind, JSON 또는 SVG로 내보내세요. 100% 브라우저 기반, 데이터가 기기를 떠나지 않습니다.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 이징 생성기 무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
- CSS 텍스트 섀도 생성기 무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.
- CSS 클립패스 생성기 무료 온라인 CSS clip-path 생성기. polygon, circle, ellipse, inset 모양을 드래그 가능한 점으로 디자인하고, 실시간 미리보기와 클릭 한 번으로 CSS 코드를 복사하세요.