Border Radius 생성기
CSS border-radius를 시각적으로 만들고 코드를 복사합니다
네 모서리를 한꺼번에 움직이는 연동 모드와 각각 따로 조절하는 개별 모드를 전환하며 px·%·rem 단위로 값을 만들 수 있습니다. None부터 XL, Full(50%), Pill, Blob 1·2까지 프리셋이 있어 물방울 같은 비정형 도형도 클릭 한 번으로 시작점을 잡을 수 있습니다. 네 값이 같으면 border-radius: 16px처럼 짧게, 다르면 시계 방향 네 값으로 코드가 정리되어 나오므로 불필요하게 긴 CSS를 쓰지 않아도 됩니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
border-radius: 16px;
Border Radius, 이렇게 쓰세요
네 모서리 각각의 곡률을 따로 조절하고, 타원형 곡률(가로/세로 분리)까지 지원하는 border-radius 생성기입니다.
카드·버튼·아바타의 모서리를 통일할 때, 한쪽만 둥근 탭 모양이나 물방울 형태를 만들 때 씁니다.
부모 요소에 overflow: hidden 이 없으면 자식 이미지가 모서리를 뚫고 나옵니다. 예: 50% 는 정사각형에서만 정원이 됩니다.
같은 카테고리 도구
자주 묻는 질문
Q. 슬래시(/)가 들어간 값은 무엇인가요?
가로 반지름 / 세로 반지름을 따로 지정하는 문법입니다. 타원형 모서리를 만들 때 씁니다.
Q. 50%로 두었는데 정원이 아니라 타원이 돼요.
요소의 가로·세로가 다르면 %는 각 축 기준으로 계산되어 타원이 됩니다. 정원은 정사각형 요소에 50%를 주거나, 큰 px 값(예: 9999px)을 쓰면 됩니다.
Q. 한쪽 모서리만 둥근 탭 모양은 어떻게 만드나요?
연동을 끄고 Top Left·Top Right만 값을 주고 아래 두 개는 0으로 두세요. 결과는 12px 12px 0 0 처럼 네 값으로 나옵니다.