CSS Border Radius 생성기: 눈대중으로 모서리 값 잡는 시대는 끝났다
📷 Tranmautritam / PexelsCSS Border Radius 생성기: 눈대중으로 모서리 값 잡는 시대는 끝났다
CSS border-radius 완벽 가이드 — 기본 둥근 버튼부터 완벽한 원과 유기적 형태까지. 실시간 미리보기 생성기 도구 포함.
CSS Border Radius 생성기: 눈대중으로 모서리 값 잡는 시대는 끝났다
솔직히 말하면, 나는 CSS border-radius를 꽤 오랫동안 감으로 작업했다. 8px로 시작해서 마음에 안 들면 12px, 그래도 이상하면 6px... 브라우저를 새로고침하며 모서리가 딱 맞을 때까지 반복하는 그 과정. 지금 돌아보면 시간 낭비였지만, 그게 "당연한 방법"이라고 생각했다.
이제는 CSS Border Radius 생성기를 쓴다. 슬라이더로 값을 조정하면 실시간으로 모양이 바뀌고, 완성되면 CSS를 복사하면 끝이다. 근데 도구보다 더 중요한 건 border-radius를 제대로 이해하는 것이다. 이 글에서 그 내용을 다룬다.
border-radius의 기초: 생각보다 간단하다
border-radius는 CSS에서 요소의 모서리를 둥글게 만드는 속성이다. 기본 구조는 이렇다:
/* 모든 모서리 동일 */
border-radius: 8px;
/* 상하 | 좌우 */
border-radius: 8px 16px;
/* 좌상단 | 상하 | 우하단 */
border-radius: 8px 16px 24px;
/* 좌상단 | 우상단 | 우하단 | 좌하단 (시계 방향) */
border-radius: 8px 16px 24px 32px;
마지막 4값 표기법이 가장 많이 쓰인다. 순서를 외우기 쉬운 방법: 시계 방향으로 왼쪽 상단부터. 12시 방향 위치의 상단 좌측 모서리부터 시작해서 시계 방향으로 돌아간다.
개별 모서리 속성도 있다:
border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius
단축 속성보다 코드가 길어지지만, 특정 모서리만 바꿀 때 의도가 명확하게 드러난다.
px vs % — 실제로 중요한 차이
px (픽셀): 절대값이다. border-radius: 12px는 요소 크기가 어떻든 항상 12px로 둥글어진다. 버튼이나 카드처럼 크기가 정해진 UI 컴포넌트에 적합하다.
% (퍼센트): 요소 크기에 상대적이다. 너비와 높이가 다른 경우 타원형이 되고, 정사각형 요소에서 50%는 완벽한 원을 만든다.
/* 정사각형에 50% → 완벽한 원 */
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
/* 직사각형에 50% → 타원 (pill shape) */
.badge {
width: 120px;
height: 32px;
border-radius: 50px; /* px를 쓰는 게 더 안전 */
}
pill shape(알약 모양)을 만들 때 border-radius: 50%를 쓰는 실수를 자주 본다. 직사각형에서 50%는 타원이 된다. 알약 모양을 원하면 border-radius: 9999px나 border-radius: 100px처럼 충분히 큰 px 값을 쓰는 게 낫다.
실전 사용 사례
버튼
/* 미묘하게 둥근 버튼 */
.btn {
border-radius: 6px;
}
/* 알약형 버튼 */
.btn-pill {
border-radius: 9999px;
}
/* 완전히 사각형인 버튼 (의도적인 경우) */
.btn-square {
border-radius: 0;
}
디자인 시스템에서 버튼 스타일을 통일할 때 CSS 변수로 관리하는 걸 추천한다:
:root {
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
}
이렇게 하면 디자인 언어를 바꿀 때 변수 하나만 수정하면 된다.
카드와 컨테이너
카드에 border-radius를 적용할 때 중요한 함정이 있다: 자식 요소의 오버플로우. 카드 안의 이미지가 모서리를 삐져나온다면 overflow: hidden을 추가해야 한다.
.card {
border-radius: 12px;
overflow: hidden; /* 이거 없으면 이미지가 모서리 밖으로 튀어나옴 */
}
아바타와 프로필 이미지
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover; /* 이미지 비율 유지 */
}
진행 바
.progress-bar {
height: 8px;
border-radius: 4px; /* 높이의 절반 — 완전히 둥근 끝 */
overflow: hidden;
}
.progress-fill {
height: 100%;
border-radius: inherit; /* 부모의 border-radius 상속 */
}
고급 기법: 타원형 반지름
border-radius는 사실 숨겨진 기능이 있다. / 문법을 사용하면 수평과 수직 반지름을 독립적으로 지정할 수 있다:
/* 수평 반지름 40px, 수직 반지름 20px */
.pill {
border-radius: 40px / 20px;
}
/* 각 모서리의 수평/수직 반지름 개별 지정 */
.custom {
border-radius: 20px 50px / 10px 30px;
}
이 기법을 활용하면 정확한 타원 모서리를 만들 수 있다.
유기적(블롭) 형태 만들기
소셜 미디어나 마케팅 사이트에서 자주 보이는 불규칙한 블롭 형태. 8값 표기법으로 만든다:
/* 슬라임 같은 유기적 형태 */
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
앞의 4값은 수평 반지름(좌상단, 우상단, 우하단, 좌하단), 뒤의 4값은 수직 반지름이다. 값을 조금씩 바꾸면 완전히 다른 형태가 나온다.
CSS 애니메이션과 결합하면 살아있는 것처럼 움직이는 블롭을 만들 수 있다:
.blob {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
CSS 애니메이션과 border-radius
border-radius는 CSS에서 애니메이션 가능한 속성이다. transition을 추가하면 hover나 상태 변화 때 부드럽게 전환된다:
.button {
border-radius: 8px;
transition: border-radius 0.2s ease;
}
.button:hover {
border-radius: 16px; /* hover 시 더 둥글게 */
}
버튼이 로딩 상태로 바뀔 때 사각형에서 원으로 변환하는 효과:
.btn {
width: 120px;
height: 40px;
border-radius: 8px;
transition: all 0.3s ease;
}
.btn.loading {
width: 40px; /* 정사각형으로 줄임 */
border-radius: 50%; /* 그리고 원으로 */
}
흔한 실수들
1. 자식 요소 오버플로우 무시
카드에 border-radius를 줬는데 안에 이미지가 삐져나온다면, 카드에 overflow: hidden이 없는 것이다.
2. 다크모드에서 이상한 테두리
border-radius: 50%인 아바타에 border: 2px solid white를 추가했을 때, 다크모드에서 테두리 색이 맞지 않는 경우가 있다. outline을 활용하거나 CSS 변수로 테두리 색을 관리하자.
3. 퍼센트 값 오해
border-radius: 50%를 직사각형에 쓰면 타원이 된다. 알약 모양 원하면 border-radius: 9999px을.
4. 불필요하게 복잡한 값
8값 표기법은 강력하지만, 대부분의 경우 단일 값이나 4값으로 충분하다. 복잡함이 필요 없을 때 복잡하게 만들지 말자.
실시간 미리보기 도구 활용하기
CSS Border Radius 생성기를 쓰면 슬라이더로 값을 조정하면서 실시간으로 결과를 볼 수 있다. 동일 모드와 개별 모드를 전환해서 각 모서리를 독립적으로 조정하거나, px와 % 단위를 바꿔가며 차이를 직접 확인할 수 있다.
모양이 마음에 들면 Copy 버튼으로 CSS를 바로 복사해서 프로젝트에 붙여넣으면 된다.
브라우저 호환성
border-radius는 IE9 이상 모든 브라우저에서 지원된다. 현재 모든 주요 브라우저(Chrome, Firefox, Safari, Edge)에서 완벽하게 작동하므로 호환성 걱정은 하지 않아도 된다.
8값 표기법(타원형 반지름)도 모든 현대 브라우저에서 지원된다.
결론
border-radius는 단순해 보이지만 다양한 UI 패턴에 활용되는 중요한 속성이다. 기본적인 둥근 모서리부터 원형 아바타, 알약 버튼, 유기적 블롭까지 — 알고 나면 디자인 가능성이 크게 넓어진다.
무엇보다 CSS Border Radius 생성기로 직접 만져보면서 감을 익히는 게 가장 빠른 학습 방법이다. 슬라이더 하나씩 조정해보면 px와 %의 차이, 4개 모서리 값의 의미가 금방 이해된다.