Border Radius 생성기
버튼·카드·이미지의 둥근 모서리를 시각적으로 편집합니다. 4개 꼭지점을 따로 조절할 수 있고, 고급 모드에서는 타원형 "fancy border-radius" 효과(블롭 모양)도 만들 수 있습니다.
사용 방법
"단순" 모드는 4개 꼭지점을 각각 단일 반지름으로 조절. "고급" 모드는 가로/세로 반지름을 별도로 지정해 타원형 곡선을 만듭니다.
각 꼭지점의 슬라이더(0~100%)를 움직이면 미리보기가 즉시 갱신됩니다. "전체 동일" 버튼으로 4개 꼭지점을 한 번에 조절할 수도 있습니다.
하단의 CSS 코드를 한 번에 복사. 단축형(`border-radius: 50%`) 또는 명시형(`border-top-left-radius:` 등) 중 선택할 수 있습니다.
자주 묻는 질문
border-radius 단축 표기는 어떻게 읽나요?
`border-radius: A B C D` = TopLeft Top-Right BottomRight BottomLeft (시계 방향). 슬래시(`/`)가 있으면 앞은 가로 반지름, 뒤는 세로 반지름입니다(타원형). 예: `border-radius: 50% 50% 50% 50% / 30% 30% 30% 30%`.
px와 % 차이는?
px는 절대값(요소 크기와 무관), %는 요소의 가로(가로 반지름)·세로(세로 반지름)에 대한 비율입니다. 50%는 요소가 직사각형이면 캡슐 모양, 정사각형이면 원이 됩니다. 본 도구는 % 기반이라 요소 크기에 자연스럽게 적응합니다.
"고급" 모드(fancy border-radius)는?
각 꼭지점마다 가로·세로 반지름을 따로 지정해 타원형 곡선을 만드는 기법입니다. 한쪽이 더 평평한 비대칭 "블롭" 모양을 만들 수 있어 카드 디자인에서 인기가 많습니다(예: 50% 30% 70% 40% / 60% 40% 50% 30%).
50% 이상은 어떻게 보이나요?
50%면 모서리가 인접 변의 절반까지 둥글어집니다. 100%면 인접 변 길이만큼이 됩니다. 4개 꼭지점이 모두 50% 이상이면 원·타원이 됩니다. 단, 너무 크면 인접 모서리와 겹쳐 자동으로 비례 축소됩니다(CSS 명세).
데이터가 서버에 전송되나요?
아닙니다. 모든 처리는 브라우저에서만 이루어지며, 입력값이 외부로 전송되지 않습니다.
