CSS Border Radius란?
CSS border-radius 속성은 요소의 모서리를 둥글게 만듭니다. 네 모서리를 균일하게 설정하거나, 각 모서리를 개별적으로 제어하여 알약 모양, 원, 물방울 같은 유기적 디자인 등 다양한 형태를 만들 수 있습니다.
일반적인 Border Radius 패턴
- 알약 모양: border-radius를 요소 높이의 절반으로 설정합니다 (예:
border-radius: 9999px). - 원형: 정사각형 요소에
border-radius: 50%를 적용합니다. - 부드러운 라운딩: 카드 모서리나 버튼에 4~8px의 작은 값을 사용합니다.
자주 묻는 질문
border-radius에 퍼센트 값을 사용할 수 있나요?
네. 퍼센트 값은 요소의 크기에 상대적입니다. 정사각형 요소에 50%를 적용하면 완벽한 원이 됩니다. 정사각형이 아닌 요소에서는 타원이 만들어집니다.
border-radius가 이미지에도 적용되나요?
네. <img> 요소나 컨테이너에 직접 border-radius를 적용하여 둥근 이미지를 만들 수 있습니다. 깔끔한 모서리를 위해 overflow: hidden과 함께 사용하세요.