CSS Border Radius 생성기
시각적 CSS border-radius 생성기. 각 모서리를 독립적으로 조정하고 실시간 미리보기로 CSS 코드를 즉시 복사하세요.
CSS border-radius란 무엇인가요?
CSS border-radius는 요소의 외부 테두리 모서리를 둥글게 만드는 속성입니다. 1개에서 4개의 값을 사용하여 각 모서리를 독립적으로 설정할 수 있습니다.
border-radius로 완벽한 원을 만들려면?
정사각형 요소(너비와 높이가 동일)에 border-radius를 50%로 설정하세요. 타원의 경우 직사각형 요소에 border-radius: 50%를 사용하세요.
border-radius에 어떤 단위를 사용할 수 있나요?
border-radius는 px, %, em, rem, vw, vh 및 기타 CSS 길이 단위를 허용합니다. 백분율은 요소의 치수에 상대적입니다.
border-radius의 단축 구문은?
단축 구문은 왼쪽상단 오른쪽상단 오른쪽하단 왼쪽하단 패턴을 따릅니다. 하나의 값은 모든 모서리에 적용됩니다. 두 개의 값은 왼쪽상단/오른쪽하단과 오른쪽상단/왼쪽하단을 설정합니다.
타원형 모서리를 만들 수 있나요?
네, 슬래시(/) 구문을 사용하여 수평 및 수직 반경을 별도로 정의할 수 있습니다. 예: border-radius: 50% / 100px.
border-radius가 모든 요소에서 작동하나요?
border-radius는 div, button, img, input을 포함한 대부분의 HTML 요소에서 작동합니다. 단, overflow: hidden이 없는 요소에서는 오버플로 콘텐츠를 클리핑하지 않을 수 있습니다.
border-radius로 복잡한 모양을 만들 수 있나요?
네, 각 모서리에 다른 반지름 값을 조합하여 캡슐, 타원, 잎 및 사용자 정의 유기적 모양을 만들 수 있습니다.
border-radius가 모든 브라우저에서 지원되나요?
네, border-radius는 Chrome, Firefox, Safari, Edge 및 모바일 브라우저를 포함한 모든 최신 브라우저에서 지원됩니다.
캡슐 모양 버튼을 만들려면?
border-radius를 요소 높이의 절반과 같거나 더 큰 값으로 설정하세요. 40px 높이 버튼에는 border-radius: 20px 이상을 사용하세요.
border-radius가 배경 이미지에 영향을 주나요?
네, border-radius는 요소의 배경, 배경 이미지 및 테두리를 클리핑합니다. 배경은 자동으로 둥근 모서리를 따릅니다.
border-radius를 애니메이션할 수 있나요?
네, border-radius는 CSS 트랜지션 및 애니메이션으로 애니메이션할 수 있습니다. 다양한 반지름 값 사이를 부드럽게 전환할 수 있습니다.
border-radius를 CSS 변환과 함께 사용할 수 있나요?
네, border-radius는 rotate, scale, translate와 같은 CSS 변환과 잘 작동합니다.
테두리가 있는 원을 만들려면?
너비와 높이가 동일한 정사각형 요소에 border-radius: 50%를 적용한 다음 border 속성을 추가하세요.
개별 모서리 속성과 단축 구문의 차이점은?
border-top-left-radius와 같은 개별 속성은 각 모서리를 정밀하게 제어합니다. 단축 구문은 하나의 선언으로 여러 모서리를 설정할 수 있습니다.
CSS Border Radius 생성기 사용 방법
이 CSS border-radius 생성기로 둥근 모서리를 시각적으로 디자인하세요. 모든 작업은 브라우저에서 로컬로 실행되며 데이터는 업로드되지 않습니다.
- Unit 드롭다운에서 px, %, em, rem 중 하나를 선택합니다.
- Top Left, Top Right, Bottom Right, Bottom Left 슬라이더를 움직여 각 모서리의 둥근 정도를 따로 조절합니다.
- Link all corners를 켜면 네 모서리에 같은 값을 한 번에 적용할 수 있습니다.
- 미리보기에서 생성된 CSS를 복사해 스타일시트에 붙여넣습니다.
네 모서리를 모두 50%로 하면 완전한 원이나 캡슐 모양이 됩니다. em이나 rem을 쓰면 글자 크기에 맞춰 반지름도 같이 조정됩니다.
관련 도구
- CSS 박스 섀도 생성기 무료 온라인 CSS box-shadow 생성기. 조정 가능한 오프셋, 블러, 확산, 색상, 인셋으로 아름다운 그림자를 시각적으로 생성. 라이브 미리보기 및 즉시 코드 복사.
- CSS 그라데이션 생성기 시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
- CSS Grid 생성기 라이브 미리보기가 있는 무료 시각적 CSS Grid 생성기. 반응형 그리드 레이아웃을 대화형으로 설계하고 프로덕션용 CSS 코드를 즉시 내보내세요.
- CSS Flexbox 생성기 라이브 미리보기가 있는 시각적 CSS Flexbox 생성기. Flex 속성을 조정하고 바로 사용할 수 있는 CSS 코드를 얻으세요.
- 보더 레디우스 생성기 무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 이징 생성기 무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
- CSS 텍스트 섀도 생성기 무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.