6XC

CSS 모서리 둥글기 생성기

각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요.

조회수 973회

단위

border-radius 속성이란

축약형 순서는 border-radius: 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래입니다. px는 고정된 둥글기를 만들고, %는 박스 크기에 맞춰 함께 커지거나 작아집니다 — 정사각형에 50%를 적용하면 완벽한 원이 됩니다. 값을 서로 다르게 주면 요즘 히어로 섹션에서 자주 보이는 유기적인 "블롭(blob)" 형태를 만들 수 있습니다.

자주 묻는 질문

원이나 알약 모양은 어떻게 만드나요?

정사각형 요소에 border-radius: 50%를 적용하면 원이 됩니다. 직사각형 요소에 큰 고정값(예: 999px)을 적용하면 알약 모양이 됩니다.

px와 % 중 무엇을 써야 하나요?

카드나 버튼처럼 크기와 상관없이 모서리가 항상 똑같아 보여야 한다면 px를 사용하세요. 원이나 블롭처럼 요소 크기에 맞춰 둥글기도 함께 변해야 한다면 %를 사용하세요.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기 CSS 글래스모피즘 생성기 실시간 미리보기로 유리(글래스모피즘) 효과를 디자인하세요 — 흐림, 투명도, 색조, 테두리를 조절하고 CSS를 복사하세요. 생성하기