border-radius 생성기

작동 방식

border-radius는 모서리 세 개는 둥글게, 하나는 각지게 하려는 순간부터 어려워지며, 그때마다 네 값의 순서를 찾아봐야 합니다.

순서를 한 번에 정리

왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서이며, 왼쪽 위에서 시작해 시계 방향입니다. margin, padding, border 단축 속성에도 같은 시계 방향(왼쪽 위 시작) 순서가 적용되므로 한 번 외워 두면 좋습니다.

픽셀 또는 퍼센트

픽셀은 요소 크기와 관계없이 같은 곡률을 만듭니다. 퍼센트는 요소 자체의 너비와 높이를 기준으로 하므로 곡률이 함께 변합니다. 정사각형에 50%를 주면 완벽한 원이 되며, 둥근 아바타를 만드는 표준적인 방법입니다.

알약 모양

요소 높이의 절반보다 큰 반경은 정확히 절반으로 제한됩니다. 그래서 border-radius: 999px는 높이에 관계없이 항상 알약 모양이 됩니다. 알맞은 값을 계산하는 것보다 안정적이며, 내용이 바뀌어도 계속 작동합니다.

중첩된 요소에서 모서리가 어색해 보일 때

둥근 상자 안에 또 둥근 상자가 있으면 안쪽 상자는 둘 사이의 패딩만큼 줄인 더 작은 반경이 필요합니다. 그렇지 않으면 곡선이 같은 중심을 갖지 않습니다. 작은 부분이지만 카드를 제대로 만든 것처럼 보이게 합니다.