Border Radius 완벽 가이드
Border Radius란 무엇인가요?
Border Radius는 CSS의 border-radius 속성을 사용하여 박스 요소의 모서리를 둥글게 만드는 기술입니다. 픽셀, 백분율, em 등 다양한 단위로 반경을 지정할 수 있으며, 4개 모서리를 각각 다르게 설정하거나 한 번에 동일하게 적용할 수도 있습니다. 현대 웹 디자인에서 부드러운 UI를 만드는 필수적인 CSS 속성입니다.
Border Radius 문법과 단위
기본 문법: border-radius: 10px; (4개 모서리 모두 10px) • 개별 설정: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius • 축약 문법: border-radius: topLeft topRight bottomRight bottomLeft; • 단위: px(절대 크기), %(요소 크기 대비), em(폰트 크기 대비), rem(루트 폰트 크기 대비) • 50%는 정사각형에서 완전한 원을 만듭니다.
주요 속성 값
• top-left: 왼쪽 위 모서리 반경 • top-right: 오른쪽 위 모서리 반경 • bottom-right: 오른쪽 아래 모서리 반경 • bottom-left: 왼쪽 아래 모서리 반경 • all-corners: 4개 모서리를 동일하게 설정 • 슬래시(/) 문법: border-radius: 10px / 20px; (가로 10px, 세로 20px - 타원형 모서리)
사용 방법
1단계: 프리셋 탭에서 자주 사용되는 모서리 스타일을 선택하거나 커스텀 탭에서 직접 설정합니다. 2단계: '모든 모서리' 체크박스로 4개 모서리를 동시에 조절하거나 개별 모서리를 따로 설정합니다. 3단계: 슬라이더 또는 입력 필드로 반경 값을 조절합니다. 4단계: 미리보기 박스에서 실시간으로 결과를 확인합니다. 5단계: 'CSS 복사' 버튼으로 생성된 코드를 클립보드에 복사합니다.
자주 사용되는 프리셋 패턴
• No Radius: 0px (기본 직사각형) • Small: 4px (약간 둥글게 - 버튼/입력필드) • Medium: 8px (표준 둥글 - 카드) • Large: 16px (큰 둥글 - 컨테이너) • XLarge: 24px (매우 큰 둥글) • Round: 50% (완전한 원/타원) • Pill: 9999px (양쪽이 완전히 둥근 - 알약 형태) • Top Only: 위쪽 16px, 아래쪽 0px (위쪽 둥근 카드) • Bottom Only: 위쪽 0px, 아래쪽 16px (아래쪽 둥근 카드)
활용 사례
• 버튼과 배지: Small(4px)~Medium(8px)로 부드러운 느낌 • 카드와 패널: Medium(8px)~Large(16px)로 깔끔한 구분 • 모달과 팝업: Large(16px)~XLarge(24px)로 부드러운 프레임 • 아바타와 프로필 이미지: 50%로 완전한 원 • 탭과 알약: Pill(9999px)로 양쪽 둥근 형태 • 입력 필드: Small(4px)로 미세한 둥근 모서리 • 이미지 썸네일: Medium(8px)로 자연스러운 모서리
반응형 디자인 고려사항
모바일에서는 더 작은 border-radius 값을 사용하는 것이 좋습니다. 데스크톱의 50-70% 크기로 조절하면 모바일 화면에서 더 균형 잡힌的外观를 보입니다. 예: 데스크톱 16px → 모바일 8-12px. 또한 % 단위는 반응형에 유리하지만 정사각형이 아닌 요소에서는 예상치 못한 타원형 모서리가 생길 수 있으니 주의해야 합니다.
자주 묻는 질문 (FAQ)
- Q. Border Radius와 Border-Radius의 차이가 무엇인가요?
- A. Border Radius는 CSS 속성 이름인 border-radius를 의미합니다. CSS에서는 border-radius(하이픈 연결)를 사용하고, JavaScript에서는 element.style.borderRadius(카멜케이스)를 사용합니다. 기능은 동일하며 표기만 다릅니다.
- Q. 50%를 입력했는데 완전한 원이 만들어지지 않아요.
- A. border-radius: 50%는 요소가 정사각형일 때만 완전한 원을 만듭니다. 가로와 세로 길이가 다른 직사각형에서는 타원형 모서리가 생성됩니다. 완전한 원을 만들려면 요소의 폭과 높이를 동일하게 설정하세요.
- Q. 모서리마다 다른 반경을 어떻게 설정하나요?
- A. 두 가지 방법이 있습니다. 1) 개별 속성 사용: border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px; 2) 축약 속성: border-radius: 10px 20px 30px 40px; (왼쪽 위부터 시계방향)
- Q. 브라우저 호환성은 어떤가요?
- A. border-radius는 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 완벽하게 지원됩니다. IE9 이상부터 지원하므로 현대 웹 개발에서 안전하게 사용할 수 있습니다. prefix(-webkit-, -moz-)는 더 이상 필요하지 않습니다.
- Q. 이미지에 border-radius를 적용하는 방법은?
- A. img 태그로 직접 사용할 때는 border-radius가 잘 작동합니다. 하지만 background-image를 사용하는 경우 부모 요소에 border-radius를 적용하고 overflow: hidden;을 추가하면 이미지가 둥근 모서리로 잘려서 보입니다.