CSS 도구/테두리 반경 생성기
테두리 반경 생성기
비주얼 컨트롤과 프리셋으로 CSS border-radius 값 생성
컨트롤
비주얼 에디터
8px
8px
8px
8px
모서리 핸들을 드래그하여 반경 조절
테두리 반경
8px
프리셋
미리보기
200px
현재 설정으로 미리보기
CSS 코드
border-radius: 8px;테두리 반경 가이드
CSS로 둥근 모서리 만드는 방법 알아보기
Border Radius란?
CSS border-radius 속성은 요소의 외부 테두리 가장자리를 둥글게 만듭니다. 단일 반경을 설정하여 원형 모서리를 만들거나, 각 모서리마다 다른 반경을 지정하여 더 복잡한 형태를 만들 수 있습니다. 현대 웹 디자인에서 가장 많이 사용되는 CSS 속성 중 하나입니다.
사용 방법
- 모서리 핸들을 드래그하여 시각적으로 반경 값 조절
- '모서리 연결'을 토글하여 전체 또는 개별 편집
- 필요에 따라 단위 타입(px, %, rem) 선택
- 일반적인 패턴은 프리셋 사용 후 CSS 복사
프로 팁
브라우저 지원
border-radius는 Chrome, Firefox, Safari, Edge를 포함한 모든 최신 브라우저에서 지원됩니다. 우수한 호환성으로 프로덕션 사용에 안전합니다.
자주 묻는 질문
border-radius로 완벽한 원을 만들려면?
정사각형 요소(너비와 높이가 같은)에 border-radius를 50%로 설정하세요. 크기에 관계없이 완벽한 원이 만들어집니다. 직사각형의 경우 50%는 타원이 됩니다.
px와 % 단위의 차이점은?
픽셀 값(px)은 요소 크기와 관계없이 고정 크기의 둥근 모서리를 만듭니다. 퍼센트 값(%)은 요소 크기에 상대적입니다 - 50%는 항상 최대 가능한 둥글기를 만듭니다. 일관된 모서리에는 px, 반응형 디자인에는 %를 사용하세요.
각 모서리에 다른 반경을 사용할 수 있나요?
네, border-radius는 1-4개의 값을 받습니다: 1개 값은 모든 모서리에 적용, 2개 값은 왼쪽위/오른쪽아래와 오른쪽위/왼쪽아래 설정, 4개 값은 각 모서리를 개별 설정(왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래)합니다.
비대칭 블롭 모양은 어떻게 만드나요?
8개 값을 사용하여 완전한 제어: border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px. '/' 앞의 값은 수평 반경, '/' 뒤의 값은 각 모서리의 수직 반경을 제어합니다.
border-radius가 요소 콘텐츠에 영향을 주나요?
border-radius는 시각적 테두리만 둥글게 합니다. 콘텐츠는 'overflow: hidden'을 설정하지 않으면 여전히 모서리로 넘칠 수 있습니다. 이렇게 하면 콘텐츠가 둥근 모양에 맞게 잘리며, 둥근 컨테이너 안의 이미지에 유용합니다.