CSS Border Radius 생성기
미리보기의 점을 끌거나 코너별 슬라이더로 모서리를 둥글게 만듭니다 — px/%, 실시간 미리보기, 복사용 CSS. 업로드 없음, 브라우저 처리.
미리보기의 점을 끌어 각 코너를 잡으세요.
border-radius: 16px;🔒 브라우저에서 생성되며 업로드되지 않습니다.
모서리를 시각적으로 둥글게
미리보기의 점을 끌거나 각 코너의 슬라이더를 조절하고(또는 연동해 함께 이동) px와 %를
전환하며, 실제로 쓸 크기로 미리보기 상자를 키우거나 줄여 볼 수 있습니다. 미리보기는 바로 아래 적힌 선언 그 자체로
칠해지므로 보이는 그대로 붙여넣게 되고, 모든 코너가 같으면 축약형으로 줄여줍니다.
px vs %
픽셀 반경은 고정이고, 퍼센트 반경은 요소 크기에 따라 커지므로 50%는 정사각형을 원으로, 그 외에는
타원으로 만듭니다. 퍼센트는 코너의 가로 반경이면 너비를, 세로 반경이면 높이를 기준으로 계산됩니다 — 코너마다 점이 두
개인 이유입니다.
테두리와 배경
코너만이 아니라 모양 전체가 필요하면 테두리(두께·스타일·색)와 배경을 생성되는 CSS에 함께 넣을 수 있습니다. 미리보기 배경은 단색, 두 색 그라디언트, 또는 내 컴퓨터의 이미지 중에서 고를 수 있고, 이미지는 브라우저에서만 읽히므로 복사되는 CSS에는 들어가지 않습니다.
자주 묻는 질문
원은 어떻게 만드나요?
단위를 %로 하고 정사각형 요소의 모든 코너를 50%로 설정하면 완전한 원이 됩니다.
코너를 따로 설정할 수 있나요?
네. "모든 코너 연동"을 끄면 왼쪽 위·오른쪽 위·오른쪽 아래·왼쪽 아래를 각각 조절할 수 있습니다.
드래그로 코너를 잡을 수 있나요?
네. 코너마다 양쪽 변에 점이 하나씩, 모두 두 개가 있고 점을 끌면 그 반경이 정해집니다. "타원형 코너"가 꺼져 있으면 그 코너의 어느 점을 끌든 두 반경이 함께 움직입니다.
테두리와 배경도 CSS에 넣을 수 있나요?
네. "CSS에 테두리 포함" 또는 "CSS에 배경 포함"을 켜면 border-radius 아래에 해당 선언이 함께 나옵니다. 미리보기로 고른 이미지는 브라우저 밖으로 나가지 않으므로 포함되지 않습니다.
업로드되는 게 있나요?
아니요. 슬라이더 값으로 브라우저에서 CSS를 생성하며, 미리보기 이미지도 로컬에서만 읽고 어디로도 보내지 않습니다.