Border Radius 생성기

이 도구는 무엇인가요?

border-radius는 요소의 모서리를 둥글게 만드는 CSS 속성입니다. 직접 작성하면 top-left, top-right, bottom-right, bottom-left 순서로 네 개의 값을 고정된 순서로 입력해야 하는데, 특히 네 모서리 값이 서로 다를 때는 순서를 헷갈리기 쉽습니다.

이 도구는 그런 수고를 없애줍니다. 슬라이더를 움직이면 실시간 미리보기에서 모서리가 둥글어지는 모습을 확인하고, 생성된 코드 상자에서 정확한 CSS를 바로 읽을 수 있습니다. 잠금 토글 하나로 균일한 반경(네 모서리가 모두 동일한, 가장 흔한 경우)과 유기적이고 비대칭적인 모양을 위한 네 개의 독립 슬라이더 사이를 전환할 수 있습니다.

왜 사용해야 할까요?

• 드래그하는 즉시 실시간 미리보기가 업데이트됩니다. CSS를 수정하고 새로고침해서 결과를 확인할 필요가 없습니다.
• '모든 모서리에 같은 반경 적용'이라는 흔한 경우를 위한 원클릭 잠금 기능이 있으며, 잠금을 풀면 알약 모양 버튼, 말풍선, 블롭 모양을 만들 수 있습니다.
• 모든 모서리 값이 같으면 축약형 단일 값을, 다르면 전체 네 값을 출력합니다. 어느 쪽이든 복사해서 바로 붙여넣을 수 있습니다.
• 모든 처리가 브라우저 안에서 이루어집니다. 입력한 내용은 어디로도 전송되지 않습니다.
• 무료이고 회원가입이 필요 없으며 모바일에서도 작동합니다.

사용 방법

1. '모든 모서리 잠금'을 체크된 상태로 두고 슬라이더 하나를 드래그하면 박스 전체에 균일한 반경이 적용됩니다.
2. 잠금을 해제하면 각 모서리를 독립적으로 조절할 수 있습니다. 알약 모양, 눈물방울 모양, 비대칭 카드에 유용합니다.
3. 슬라이더를 조절할 때마다 미리보기 박스가 실시간으로 업데이트되는 것을 확인하세요.
4. 코드 상자에서 생성된 CSS를 복사해 스타일시트에 붙여넣으세요.

예시

입력

Top-left: 40px, Top-right: 8px, Bottom-right: 40px, Bottom-left: 8px

결과

border-radius: 40px 8px 40px 8px;

이렇게 마주 보는 모서리 값을 다르게 설정하면 잎사귀나 꽃잎 모양의 실루엣이 만들어집니다. 카드나 배지 디자인에서 흔히 쓰이는 효과입니다.

px와 % — 어떤 단위를 써야 할까요?

이 생성기는 픽셀 값을 출력하는데, 이는 버튼, 카드, 입력창처럼 요소 크기와 상관없이 고정되고 예측 가능한 모서리 반경이 필요한 대부분의 UI 작업에 적합한 기본값입니다.

퍼센트는 다르게 동작합니다. 요소 자신의 너비와 높이를 기준으로 상대적으로 계산되므로, 정사각형 요소에 50% 반경을 적용하면 완벽한 원이 되고, 정사각형이 아닌 요소에서는 타원이 됩니다. 이런 효과가 필요하다면(아바타, 컨테이너 크기에 맞춰 함께 커지는 블롭 모양 등) 생성된 CSS를 가져와 px 값을 % 값으로 직접 바꾸세요. 예를 들어 border-radius: 50%는 정사각형 박스를 원으로 바꿔줍니다.

자주 쓰이는 border-radius 패턴

• 둥근 카드: 모든 모서리가 동일하며, UI 컴포넌트에는 대략 8~16px 정도가 적당합니다.
• 알약 모양 버튼: 반경을 요소 높이의 절반으로 설정하거나, 그냥 9999px을 사용하면 높이와 상관없이 완전한 알약 모양으로 고정됩니다.
• 원형 아바타: 너비와 높이가 같은 정사각형 요소에 border-radius: 50%를 적용합니다.
• 말풍선: 세 모서리는 둥글게, 한 모서리는 각지게 — 슬라이더 세 개는 높게, 하나는 0으로 설정하세요.
• 잎사귀/꽃잎 모양: 마주 보는 모서리는 같게, 인접한 모서리는 다르게 설정합니다. 예를 들어 top-left와 bottom-right는 크게, top-right와 bottom-left는 작게 설정합니다.

그림자와 함께 사용하기

둥근 모서리는 단독으로 쓰이는 경우가 드뭅니다. 카드와 버튼에는 보통 입체감을 주는 약간의 그림자도 필요합니다. Box Shadow 생성기로 드롭 섀도를 조절한 뒤, 생성된 두 CSS를 같은 요소에 함께 적용해 보세요.

→ 박스 섀도우 생성기 · 단위 변환기

자주 묻는 질문