CSS border-radius 계산기

가로 방향 반경은 요소 너비의 %, 세로 방향 반경은 요소 높이의 %로 각각 따로 계산됩니다(MDN 기준). 그래서 정사각형이 아닌 요소에 같은 % 값을 주면 원이 아니라 타원형 모서리가 됩니다.

반경이 그 축 길이의 절반에 닿으면 더 이상 커지지 않고 고정됩니다. 정사각형에 50%(또는 가로세로 중 짧은 쪽의 절반 이상인 px 값)를 주면 완전한 원이 되고, 직사각형에 같은 조건을 주면 양 끝이 반원인 알약 모양이 됩니다.

버튼처럼 요소 크기가 고정돼 있으면 px가 예측하기 쉽습니다. 요소 크기가 반응형으로 바뀐다면 %를 쓰면 크기에 비례해 둥근 정도가 유지됩니다(단, 가로세로 비율이 다르면 모양이 살짝 달라질 수 있습니다).

이 계산기는 네 모서리에 같은 반경을 주는 가장 흔한 경우만 다룹니다. 모서리마다 다른 값을 주고 두 변에서 반경의 합이 변의 길이보다 길어지는 복잡한 경우, 브라우저가 비율대로 줄이는 별도 보정이 들어가며 이는 계산 범위 밖입니다.