CSS Border Radius 생성기 무료 온라인: 둥근 모서리 시각적 생성

A border-radius: Xpx; 동일하게, 또는 border-radius: TL TR BR BL; 개별.

A border-radius: 50%로 정사각형이 완벽한 원으로.

A 네, 각 모서리 개별 값 설정 가능.

A '연결 해제' 버튼을 클릭하면 개별 모서리 컨트롤이 분리됩니다. 이는 다른 모서리에 영향을 주지 않고 하나의 모서리 반경을 조정할 수 있음을 의미합니다. 네 개의 입력 필드가 독립적으로 변하는 것을 볼 수 있습니다. 비대칭 디자인을 만들 때 유용합니다.

A 네, 생성기에서 픽셀과 백분율 사이를 전환할 수 있습니다. 백분율은 요소의 크기에 상대적이며, 반지름 자체가 아닙니다. 200px 너비 상자에 50% 값을 설정하면 모서리에 100px 반지름이 생성됩니다. 이는 요소 크기가 변하는 반응형 레이아웃에서 특히 중요합니다. 디자인이 다양한 화면에서 유연하게 확장되어야 할 때는 백분율을 사용해 보세요.

A 픽셀 값을 사용하면 화면 크기에 관계없이 반경이 고정됩니다. 휴대폰에서는 40px 반경이 데스크톱보다 거대해 보입니다. 백분율 값으로 전환하세요. 요소 크기에 맞게 조정됩니다. 예를 들어 10%는 버튼 너비가 150px이든 300px이든 비율을 유지합니다. 먼저 생성기의 반응형 미리보기에서 디자인을 테스트하세요.

A 이 생성기는 표준 CSS 속성을 출력합니다. `--radius: 20px` 같은 커스텀 속성은 생성하지 않습니다. 스타일시트에서 출력 코드를 `var()` 호출로 감싸야 합니다. 코드를 붙여넣고 값을 `var(--my-radius)`로 바꾸세요. 시각적 조정을 위한 도구이므로, CSS 변수가 필요하면 직접 값을 옮기세요. 약 30초면 됩니다.

A 최신 브라우저에서 둥근 모서리는 GPU 가속을 사용하므로 복잡한 그림자나 그라데이션보다 렌더링이 빠릅니다. 하지만 오래된 폰에 border-radius를 50개 이상 쌓으면 배터리가 빨리 닳습니다. 프리랜서 개발자들이 페이지 하나에 50개 이상의 둥근 카드를 넣는 경우가 있는데, 그때부터 렉이 느껴집니다. 저가형 Android 기기에서는 요소를 30개 미만, 반경 20px 이하로 유지하세요. 2019년형 Moto G로 테스트하는 게 안전합니다.