개발자 도구

CSS 테두리 반경 생성기

시각적 편집기로 네 모서리의 CSS border-radius 값을 생성합니다.

브라우저에서 처리됩니다
추천 도구AI Coding Assistant

GitHub Copilot

AI pair programmer that helps you write code faster with smart suggestions.

무료 체험

개요 CSS 테두리 반경 생성기?

CSS border-radius 생성기는 각 모서리의 둥근 정도를 시각적으로 조절하여 둥근 모서리부터 복잡한 유기적 모양까지 만들 수 있습니다. 단순한 균일 라운딩과 비대칭 값 모두 지원하여 창의적인 UI 요소를 만들 수 있습니다.

사용 방법

  1. 모서리 핸들을 드래그하여 각 모서리 반경을 독립적으로 조절하세요
  2. 링크 토글로 모든 모서리에 같은 반경을 적용할 수 있습니다
  3. 라이브 미리보기로 모양을 확인하세요
  4. 생성된 border-radius CSS 속성을 복사하세요

공식

border-radius: top-left top-right bottom-right bottom-left;

자주 묻는 질문

완전한 원을 만들려면?
border-radius: 50%를 적용하면 정사각형 요소가 원이 됩니다.
타원형 모서리는 어떻게 만드나요?
border-radius에 슬래시(/)를 사용하면 수평/수직 반지름을 다르게 지정할 수 있습니다.
border-radius가 모든 요소에 적용되나요?
네, 대부분의 HTML 요소에 적용됩니다. 이미지, 버튼, div 등 어디서든 사용할 수 있습니다.

관련 참조