CSS border-radius 생성기

사용 방법

1. 둥근 카드(16px)가 이미 화면에 있습니다. 반경 슬라이더를 움직이거나 단위(px / %)를 바꾸면 모든 변경이 실시간 반영되며 누를 버튼은 없습니다.
2. 칩으로 모드를 전환하세요. “전체 모서리”는 슬라이더 하나, “모서리별”은 네 모서리(왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래)를 따로 편집하고, “타원형”은 모서리마다 가로와 세로 반경(슬래시 문법)을 추가합니다.
3. 프리셋(각진 모서리, 둥근 카드, 원, 알약, 잎, 블롭)을 클릭하면 완성된 모양이 적용되고 모드와 단위도 자동으로 따라갑니다. 전체 border-radius 선언을 원클릭으로 복사하세요.

범위, 제한 및 자주 묻는 질문

• border-radius만 다룹니다. iOS 스타일의 매끄러운 연속 곡선(스쿼클)은 clip-path나 SVG가 필요하므로 범위 밖입니다.
• 기존 CSS 값을 붙여 넣을 수 없습니다. 모든 값은 슬라이더, 프리셋, 모드 칩에서 오므로 잘못 파싱할 일이 없습니다.
• 인접한 반경의 합이 한 변보다 크면 브라우저가 비례해 줄입니다. 미리보기는 실제 렌더링 결과이고 코드 상자는 설정한 값을 보여 줍니다.
• 알약 프리셋은 9999px을 출력합니다. “최대한 둥글게”라는 관용 표기이며 브라우저가 짧은 변의 절반으로 제한합니다.
• 백분율은 축별로 측정합니다. 가로 반경은 너비, 세로 반경은 높이 기준입니다(미리보기는 정사각형이라 여기서는 둘 다 같게 보입니다). 다른 크기의 요소에서는 같은 백분율도 다르게 모양이 잡힙니다.
• 아무것도 저장되지 않고 링크 매개변수로 공유되지 않습니다. 새로고침하면 기본값인 둥근 카드로 돌아갑니다. 모든 처리는 브라우저에서 이루어집니다.