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가 어떻게 동작하는지 시각적으로 이해할 수 있습니다.
피드백 보내기
도구를 개선하는 데 도움이 되도록 의견을 알려주세요.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.