CSS Border Radius 생성기
8개의 border-radius 값을 모두 시각적으로 제어하세요.
실시간 미리보기를 통해 유기적인(Blob) 형태를 만드세요.
정보
CSS Border Radius 생성기를 사용하면 8개의 border-radius 값(4개 모서리 각각의 수평 및 수직 반경)을 모두 시각적으로 제어하고 그 결과를 실시간으로 미리 볼 수 있습니다.
일반적인 둥근 모서리 디자인 외에도, border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%와 같이 히어로 섹션 장식 등에 주로 쓰이는 Blob(유기적인 형태)도 손쉽게 생성할 수 있습니다. 모든 처리는 브라우저에서 로컬로 진행됩니다.
사용 방법
프리셋 선택
프리셋(원, 나뭇잎, Blob 등)에서 기본 모양을 선택한 후 슬라이더로 미세 조정하세요.
슬라이더 조절
각 모서리의 수평 및 수직 슬라이더를 드래그하여 조절합니다. 미리보기에 즉시 반영됩니다.
CSS 복사
"복사" 버튼을 클릭하여 생성된 CSS 코드를 클립보드에 복사하고 스타일시트에 붙여넣으세요.
용어 사전
- border-radius
- 요소의 모서리를 둥글게 만드는 CSS 속성입니다. 각 모서리마다 px나 % 단위로 독립적인 설정이 가능합니다.
- 수평 / 수직 반경 (Horizontal / Vertical Radius)
- border-radius로 정의되는 타원의 두 반경입니다. "/" 구분자를 기준으로 앞은 수평, 뒤는 수직 값을 의미합니다.
- Blob (블롭)
- 8개의 축에 모두 비대칭적인 border-radius 값을 설정하여 생성된 유기적이고 불규칙한 모양입니다.
- clip-path
- 요소를 사용자 정의 형태로 자르기 위한 CSS 속성입니다. border-radius보다 유연하지만, 문법이 더 복잡합니다.
- Shorthand (단축 속성)
- border-radius: 10px 20px 30px 40px와 같이 하나의 선언에 4개의 모서리 값을 모두 지정하는 방식입니다. "/"를 사용해 수평과 수직을 나눌 수 있습니다.
FAQ
- Q.8개의 값이란 무엇인가요?
- 4개의 모서리 각각에 수평 및 수직 반경이 있어 총 8개의 값이 존재합니다. 형식: border-radius: A B C D / E F G H.
- Q.유기적인 형태(Blob)는 어디에 사용할 수 있나요?
- 히어로 섹션의 배경 장식, 프로필 이미지 마스크, CTA 버튼 형태 등 다양한 디자인에 활용할 수 있습니다.
- Q.데이터가 서버로 전송되나요?
- 아니요. 모든 작업은 브라우저 내에서 로컬로 처리됩니다.
- Q.IE11에서도 작동하나요?
- border-radius는 IE9부터 지원됩니다. ("/"를 사용한) 타원형 표기법도 IE9 이상에서 작동합니다.
- Q.Sass나 Less와 함께 사용할 수 있나요?
- 네. 생성된 코드는 표준 CSS이므로 Sass, Less, Stylus 등과 직접 사용할 수 있습니다.
활용 사례
버튼 및 카드 디자인
일반적인 원 형태를 넘어서는 독특하고 둥근 형태의 버튼 및 카드 컴포넌트를 만들 수 있습니다.
Blob 배경 장식
랜딩 페이지의 히어로 섹션 배경 등에 사용할 수 있는 유기적인 Blob 모양을 생성합니다.
프로필 이미지 마스크
단순한 원형이나 사각형이 아닌, 평범함을 벗어난 독특한 프로필 이미지 마스크를 탐색해 보세요.
CSS 학습
슬라이더를 조작하며 실험해봄으로써 border-radius가 어떻게 동작하는지 시각적으로 이해할 수 있습니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.