CSS border-radius를 모서리별로 조절하며 미리보기와 코드를 동시에 만듭니다.

CSS 코드

CSS 보더 라디우스 사용법

  1. "모든 모서리 동기화"를 켜면 4개 슬라이더가 함께 움직입니다.
  2. 비대칭이 필요하면 동기화를 해제하고 모서리별로 따로 조정합니다.
  3. 프리셋 버튼으로 자주 쓰는 형태를 빠르게 적용합니다.
  4. 복사 버튼으로 CSS 코드를 가져갑니다.

주요 기능

  • 4개 모서리 개별 조절
  • 동기화 모드로 균일 라운드 처리
  • 6가지 프리셋 (직각·라운드·알약·잎사귀 등)
  • 실시간 미리보기
  • 한 번 클릭으로 CSS 코드 복사

활용 예시

  • 버튼·카드 모서리 둥글기 결정
  • 알약(pill) 형태 태그·뱃지 만들기
  • 아바타 원형 처리 (border-radius:50%)
  • 비대칭 라운드로 디자인 포인트
  • 입력 폼·검색창 모서리 통일

border-radius 단위 가이드

px는 절대 값으로 모든 크기에서 동일한 둥글기를 만듭니다. %는 요소 크기에 비례하므로 정사각형에 50%를 주면 완전한 원이 됩니다. 가장 자주 쓰는 값은 4~16px 사이의 자연스러운 둥글기입니다.

자주 묻는 질문

border-radius:50%과 999px의 차이는?

50%는 요소 크기에 비례, 999px는 절대 값입니다. 원/알약 효과를 위해 999px(또는 매우 큰 값)을 사용하면 요소 크기가 변해도 항상 둥글게 유지됩니다. 정사각형 아바타는 50%가 더 직관적입니다.

모서리별로 다르게 줄 수 있나요?

네, 본 도구의 동기화를 해제하고 4개 모서리를 각각 조정하면 됩니다. CSS는 border-radius: TL TR BR BL 순서입니다 (시계방향).

타원형 모서리(elliptical)도 가능한가요?

가능합니다. border-radius: 50px / 25px처럼 슬래시로 가로/세로 반경을 따로 지정하면 타원형 모서리가 됩니다. 본 도구는 원형 모서리만 지원합니다.

SVG에서도 똑같이 동작하나요?

SVG의 <rect> 요소는 rx, ry 속성으로 모서리를 둥글게 합니다. CSS border-radius는 HTML 요소 전용입니다.