모서리 둥글기

정사각형 요소에 border-radius: 50%를 적용하면 완전한 원이 됩니다. 네 모서리 모두 50%로 설정하세요.

네, border-radius는 top-left, top-right, bottom-right, bottom-left 순서로 네 값을 개별 설정할 수 있습니다. 이를 통해 독특한 비대칭 모양을 만들 수 있습니다.

버튼은 6~12px, 카드는 8~16px 범위가 대부분의 인터페이스에서 무난합니다. 중요한 것은 절대값보다 요소 간의 일관성입니다. 한 화면에서 버튼과 입력창의 둥글기가 다르면 정돈되지 않은 느낌을 줍니다. 카드 안에 이미지가 들어간다면 안쪽 요소의 반지름을 바깥보다 조금 작게 잡아야 두 곡선이 어긋나 보이지 않습니다.

50%는 각 변의 절반을 반지름으로 삼으라는 뜻이라, 요소가 정사각형이 아니면 가로와 세로 반지름이 달라져 타원이 됩니다. 진짜 원을 만들려면 width와 height를 같은 값으로 두거나 aspect-ratio: 1을 함께 지정하세요. 버튼처럼 글자 길이에 따라 폭이 달라지는 요소를 알약 모양으로 만들고 싶다면, 50% 대신 9999px처럼 큰 고정값을 주면 높이에 맞춰 양 끝이 항상 반원이 됩니다.